js动画插件Velocity.js结合vue.js使用


参考自:http://www.mrfront.com/docs/velocity.js/

网页的好不好看用户体验好不好,动画也是其中一部分重要的因素,因为项目用到的是vue.js和vue-router,采用JS钩子过渡,所以说用 Velocity.js 再好不过了!

简介:

Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画转换动画(transforms)循环、 缓动SVG 动画、和 滚动动画 等特色功能。

它比 $.animate() 更快更流畅,性能甚至高于 CSS3 animation, 是 jQuery 和 CSS3 transition 的最佳组合,它支持所有现代浏览器,最低可兼容到 IE8 和 Android 2.3。

引入:

这里注意一下window.Velocity = window.velocity = Velocity;,使用windows下全局变量是怕velocity.ui找不到Velocity,不加会报错的,但是不影响使用,所以最好还是加一下,从velocity.ui的源码中也可看出。


import Velocity from './assets/js/velocity.min';
window.Velocity = window.velocity = Velocity;
import './assets/js/velocity.ui';

创建组组件

<transition mode="out-in"
            v-on:enter="enter"
            v-on:leave="leave"
            v-bind:css="false"
            appear
            v-on:before-appear="beforeAppear"
            v-on:appear="appear"
            v-on:after-appear="">
    <router-view></router-view>
</transition>

定义velocity

beforeEnter: function (el) {
},
enter: function (el, done) {
    Velocity(el, "transition.bounceRightIn", 500, done);
},
leave: function (el, done) {
    Velocity(el, "transition.bounceRightOut", 500, done);
},
beforeAppear: function (el) {
    $(el).attr('style','display:none;');
    //严格模式下不可用改用jquery
    // el.style = 'display:none;';
},
appear:function (el,done) {
    Velocity(el, "transition.bounceRightIn", { duration: 800,delay:800}, done);
   // el.style = 'animated lightSpeedIn aConfigDelay';
   // done;
},

有个地方要注意一下:Velocity的延迟加载动画是先显示出DOM才会延迟,所以会出现直接显示出这个元素,然后才加载动画的效果,不像animate.css那样,所以如果用了delay:800这个选项就要注意了,在beforeAppear隐藏这个元素就可以了!

本文 暂无 评论

Top