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中动画的封装
![](https://img2018.cnblogs.com/blog/1247144/201810/1247144-20181026105210176-736980108.jpg)