Web前端培训：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：\vue\chapter04\demo03.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属性。