Web前端技术是利用HTML、CSS、JS以及更多的框架技术来实现编写上面提到类似淘宝网的各种网站页面，还有app应用、2D&3D游戏、各种小程序、VR和AR等应用。而web前端全栈开发工程师还掌握一些数据库、服务器、测试技术既可以跟UI设计和后台开发合作完成项目，也可以独立完成各类应用。

汇智动力web前端培训优势

面授小班教学、项目实战丰富、精英教学团队

哪些人适合学WEB大前端？

应届生、转行、小白、自主创业者

	我要就业 毕业等于失业？学最新前端技能做最酷的IT人		我要转行 工资低，没上升空间？转行轻松打开职业前景
	我要创业 大前端课程，全面提升能力为自己打工最佳选择		我要加薪 天天加班不加工资？提升实力理直气壮加薪

　　appear初始渲染动画的方式

　　在前面的案例中，动画效果都是在事件处理方法中控制的，在元素初始渲染时(页面刚打开时)并没有动画效果。如果希望给元素添加初始渲染的动画效果，可以通过给transition组件设置appear属性来实现。示例代码如下：

　　<transition appear appear-class="custom-appear-class"

　　appear-to-class="custom-appear-to-class"

　　appear-active-class="custom-appear-active-class">

　　</transition>

　　在上述代码中，appear表示开启此特性，appear-class表示初始class样式，appear-to-class表示过渡完成的class样式，appear-active-class会应用在整个过渡过程中。

　　为了使读者更好地理解，下面我们通过例4-3进行演示。

　　【例4-3】

　　(1)创建：C：vuechapter04demo03.html文件，具体代码如下：

　　<link rel="stylesheet" href="animate.css">

　　<div id="app">

　　<button @click="show=!show">显示/隐藏</button>

　　<transition appear appear-active-class="animated swing"

　　enter-active-class="animated bounceIn"

　　leave-active-class="animated bounceOut">

　　<div v-if="show">过渡文字效果</div>

　　</transition>

　　</div>

　　<script>

　　var vm = new Vue({ el: '#app', data: { show: true } })

　　</script>

　　在上述代码中，第4行在标签中定义了appear和appear-active-class属性。

　　(2)在浏览器中打开demo03.html文件，查看元素初次渲染的过渡动画效果。

　　小提示：

　　关于appear-class、appear-to-class、appear-active-class三者的排序问题，分为以下4种情况。

　　(1)如果appear-active-class排在最后一个，只有appear-active-class属性起作用。

　　(2)如果appear-active-class排在第一个，它本身不起作用。此时由appear-class过渡到appear-to-class属性。

　　(3)如果appear-class排在第一个，它本身不起作用。由appear-active-class过渡到appear-to-class属性。

　　(4)如果appear-to-class排在第一个，它本身不起作用，由appear-class过渡到appear-active-class属性。