VUE.js入门学习(4)-动画特效

1、VUE中CSS动画原理(more是  v-enter 具体的根据 name的来决定)

动画是通过在某一时间段来添加样式决定的。

要通过 transition进行包裹。

 2、在VUE中使用 animate.css库

(1)不用name的另外一种写法

 

(2)使用animate.css库( 库名+动画名   ---@keyframes类型的 )

第一次刷新的时候页面就出现动画效果

 (3)在VUE中同时使用过渡和动画

type="transition" 就是按照 transition的动画时间来计数。

第一次就有动画:appear 、 appear-~

 自己定义时间:  :duration="20000" 或者复杂点的 :duration="{enter:5000,leave:10000}"

3、在VUE中的JS动画与Velocity.js

(1)根据js钩子来实现  @before-enter  对应的就是  @before-leave  ~~~   done()很重要

 (2)Velocity.js的使用

 4、Vue中多个元素或组建的过渡  dom会复用,给每个添加一个key值就可以了

 

先进来在隐藏的效果

 

 5、VUE中列表过渡

 6、VUE中动画的封装

猜你喜欢

转载自www.cnblogs.com/chengmingxiaowu/p/9144814.html