美文网首页我爱编程
【Vue12】JS动画和Velocity.js

【Vue12】JS动画和Velocity.js

作者: 八宝君 | 来源:发表于2018-05-25 02:38 被阅读0次

    JS动画

    前两章主要说的是CSS动画,同样也可以使用JS动画,Vue中提供了很多JS动画的钩子。
    transition上绑定一个事件钩子,当这个事件被触发的时候,执行一个函数,函数写在methods里,这个函数接收一个el参数,el指的就是动画包裹的div标签。

    绑定钩子
    钩子的执行函数
    来看下效果图:
    发生变化啦
    钩子还挺多的,贴一下都有哪些钩子:
    我是钩子函数1 我是钩子函数2
    框出来的是可以接收两个参数的钩子。其它的都是接收el这个参数,这两个还可以接收done,当动画结束之后,在enter这个钩子里,要手动执行一下done这个回调函数,它被调用的时候表示动画已执行完,此时触发一个事件after-enter
    完美组成入场动画1 完美组成入场动画2
    同理还有出场动画:before-Leaveleaveafter-leave,用法和入场动画一样。

    Velocity.js

    这个Velocity.js是js常用的一个动画库,我是Velocity.js的官网
    使用步骤如下:

    1. 下载Velocity.js(也可以不下载,通过cdn引用)
    2. 在<head>处引用
    3. 按照相应的规则写对应的代码


      对应的代码

    官网是做了这样的动画:


    模板处
    methods处

    我觉得动画效果很酷炫,具体可在Vue官网看这段代码的效果。

    相关文章

      网友评论

        本文标题:【Vue12】JS动画和Velocity.js

        本文链接:https://www.haomeiwen.com/subject/abaejftx.html