动画-使用第三方animate.css类库实现动画
一、animate.css类库实现动画
新建05动画-使用第三方类实现动画
可以看到，此时是没有任何动画效果的。
了解animate.css，提供了好多常见的动画效果，在03和04中，学会了如何进场和立场，但是有一些特效不好实现。于是我们可以借助第三方animate.css来帮助我们实现，特殊的出场和离场动画，提供的样式更加丰富些。
在框内选择各种效果，可以看到字体显示了该种类对应的动画。
先设置出场和离场动画：
<!-- 入场bounceIn 离场bounceout-->
在使用了第三方animate.css后，我们就不需要写V-等。
＜transition enter -active-class=“bounceIn”leave-active-class“bounceOut”＞
其中，enter -active-class，表示进入时间段，这个时间段用bounceIn这个动画；
leave-active-class，表示出场时间段，这个时间段用bounceOut这个动画；
点击，我们会发现，并没有任何效果。原因在于入场和出场之前，我们需要新加一个类，叫“animated”，代码如下：
＜transition enter -active-class=“bounceIn”leave-active-class“bounceOut”：duration=“200”＞
＜h3 V-if=“flag”class=“animated”＞只是一个H3＜/h3＞
＜/transition＞
＜!--使用：duration“毫秒值”来统一设置入场和离场时候的动画时长--＞
＜/div＞
这是发现，动画可以正常使用了。“animated”可以写一次，也可以写两次。经过实践发现，写一次也可正常启动动画。
＜acript＞
//创建Vue 实例，得到 Viewmodel
el:’lapp’,
data：（
flag：false
},
Methods:{}
}};
＜transition
enter-active-class=“bounceIn”
leave-active-class=“bounceOut”
;duration=”(enter:200,leave:400}”＞
＜h3 V-if=“flag”class=“animated”＞只是一个H3＜/h3＞
＜/transition＞
＜/div＞
Duration，是为动画指定特定时间，使用其可以统一设置“入场”和“离场”的动画时长。使用Durationduration=”(enter:200,leave:400}，来分别设置入场的时长和离场的时长。此时刷新，发现动画的出现明显的慢了一些。
