【VUE】JS动画以及Velocity.js动画库

不是Null
1,558 阅读3分钟

这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战

动画钩子

除了用CSS来实现vue的组件过渡与动画，还可以用JavaScript的钩子函数来实现，在钩子函数中直接操作DOM即可。此外，还可以配合使用第三方 JavaScript 动画库，如 Velocity.js[vəˈlɒsəti]

<transition 
    v-on:before-enter="handleBeforeEnter" 
    v-on:enter="handleenter" 
    v-on:after-enter="handleafterEnter" 
    v-on:enter-cancelled="handleenterCancelled" 
    v-on:before-leave="handlebeforeLeave" 
    v-on:leave="handleleave" 
    v-on:after-leave="handleafterLeave" 
    v-on:leave-cancelled="handleleaveCancelled" > 
    <!-- ... --> 
</transition>

钩子函数分为入场钩子和出场钩子，具体分类及含义如下所示：

入场钩子出场钩子
进入过渡前：before-enter离开过渡运行前：before-leave
过渡运行时：enter离开过渡运行时：leave
过渡完成后：after-enter离开过渡运行后：after-leave
过渡被打断时：enter-cancelled离开过渡被打断时：leave-cancelled

首先新建个普通组件，可以实现简单显隐切换

<div id="app">
        <button type="button" @click="handleToggle">控制显示和隐藏</button>
        <transition name="fade" 
            @before-enter="handleBeforEnter" 
            @enter="handleEnter" 
            @after-enter="handleAfterEnter"
        >
            <child v-show="show"></child>
        </transition>
</div>
Vue.component('child', {
        template: `<div>显示和隐藏的内容</div>`
})
var vm = new Vue({
        el: "#app",
        data: function() {
                return {
                        show: true
                }
        },
        methods: {
                handleToggle() {
                        this.show = !this.show
                },
        }
})

入场钩子before-enter进入过渡前状态

handleBeforEnter: function(el) {
    console.log('beforeenter')
    el.style.opacity = 0
},
  • 当现实过渡动画区域，即区域入场时，会触发before-enter钩子函数；
  • before-enter 函数还包含一个el参数（注：el指代的是 <transition>包裹的东西 ），表示绑定过渡动画的元素。

入场钩子enter 过渡进入完成时状态

handleEnter: function(el,done) {
        setTimeout(function() {
        el.style.opacity = 1;
        done()
        }, 2000)
},
  • 语法：before-enter会接受两个参数，语法为enter(el,done)，done为回调函数；
  • 触发时机：当before-enter触发完毕后的下一帧，将会真正运行动画效果，整个动画效果也将放到enter这个钩子阶段。
  • done回调函数：当动画执行结束后需要手动去调用done回调函数，告诉vue动画执行完毕，至此才可以进行下一步操作。

过渡完成后 @after-enter="handleAfterEnter

handleAfterEnter: function(el) {
        console.log('afterenter')
        el.style.opacity = 1
}
  • 执行时机：在enter过渡进入完成后触发done()回调函数，告知vue动画执行完毕，下一步执行after-enter过渡完成后钩子函数。
  • after-enter 接受一个参数el

过渡被打断时 @before-enter="handleenterCancelled

handleEnterCancel: function() {
    console.log('enter-cancelled')
}

出场钩子与入场钩子语法类似。

  1. before-leave(el)离开过渡运行前；
  2. leave(el,done)离开过渡运行时；
  3. after-leave(el)离开过渡运行后；
  4. leave-cancelled(el)离开过渡被打断时。
  • 当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
  • 如果你只想设置组件过渡进入的效果而不想有组件过渡离开的效果，这时你就可以用钩子函数，只设置beforeEnter、enter、afterEnter这几个钩子函数就可以了。

Velocity.js动画库

  1. Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖 jQuery，可单独使用。
  2. Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
  3. 有几十种类似animate.css的预定义动画api
  4. 支持自定义动效，拼装队列动效等等
  5. 动画回调 比如 Begin & Complete & Progress 回调函数

使用方法：

  1. 引入Velocity.js文件
<script src="./velocity.min.js"></script>
  1. 具体实现
handleEnter: function(el, done) {
        console.log('enter')
        velocity(el, {
                opacity: 1
        }, {
                duration: 2000,
                complete: done
        })
},

关于Velocity.js的其他用法可以去Velocity官网阅读相关API

avatar
文章
阅读
粉丝