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上,请自行查看!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181208G06VU800?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券