Vue从入门到实战-动画特效

1、Vue中CSS动画原理

构建一个动画原理，在还未执行之前也就是第一帧的时候会往div加两个class，当执行到第二帧的时候，移除到第一个class，然后添加fade-*-to,当执行到最后一帧，把剩余的两class也移除。这里之所以都是fade前缀，是因为你的这里定义的就是fade,如果不定义name,默认是v前缀，如下图：

2、在Vue中使用Animate.css库

首先，引入animate.css库，在需要显示或者隐藏元素加上两个属性名，

属性名对应的类名必须包含一个animated 类名

3、在Vue中同时使用过渡和动画

1.第一次显示的时候也要显示动画效果怎么写？

appear

appear-active-class="animated 动画效果class"

2.animate.css库是@keyframes 形式

*注意：第一必须使用自定义写法，把两个属性名加上

第二就是必须包含一个animated 类名

3.如何设置动画时长？

*当两个动画都要实现，但是要以哪个动画时长为时长呢？可以通过type属性，如果还不能满足需要,那么你还可以使用duration来设置可以简单来写duration:5000 ，也可以复杂来写:duration=""。

更多效果大家可以到Animate.css库官网查看。

4、Vue中Js动画与Velocity.js的结合

handleLeave(el,done){

Velocity(el,{

opactity:

},{

duration:1000,

complete:done

});

}

这个方法就是绑定在标签上的一个方法，然后会有两个参数，第一个就是被标签所包裹的元素，第二个就是一个执行回调函数done,而且这个函数，必须在动画执行完毕调用！

5、Vue中多个元素或组件的过渡

就是动画标签包裹动态组件

6、Vue中列表的过渡

用标签，把循环列表包裹起来，相当于给列表的每一项都加了一个transition动画效果。

7、Vue中动画封装

注意：在组件模板的插槽那里只能使用v-if

源码已上传到GitHub上，请自行查看！