JS动画
前两章主要说的是CSS动画,同样也可以使用JS动画,Vue中提供了很多JS动画的钩子。
在transition上绑定一个事件钩子,当这个事件被触发的时候,执行一个函数,函数写在methods里,这个函数接收一个el参数,el指的就是动画包裹的div标签。
绑定钩子
钩子的执行函数
来看下效果图:
发生变化啦
钩子还挺多的,贴一下都有哪些钩子:
我是钩子函数1
我是钩子函数2
框出来的是可以接收两个参数的钩子。其它的都是接收
el这个参数,这两个还可以接收done,当动画结束之后,在enter这个钩子里,要手动执行一下done这个回调函数,它被调用的时候表示动画已执行完,此时触发一个事件after-enter。
完美组成入场动画1
完美组成入场动画2
同理还有出场动画:
before-Leave、leave、after-leave,用法和入场动画一样。
Velocity.js
这个Velocity.js是js常用的一个动画库,我是Velocity.js的官网 。
使用步骤如下:
- 下载Velocity.js(也可以不下载,通过cdn引用)
- 在<head>处引用
-
按照相应的规则写对应的代码
对应的代码
官网是做了这样的动画:
模板处
methods处
我觉得动画效果很酷炫,具体可在Vue官网看这段代码的效果。









网友评论