Vue项目轻松实现转场动画

      在做混合开发的项目时，通常需要实现跟原生一样的转场动画，之前有个vue项目使用了vue路由钩子结合animate.css实现的，但没研究透所以在App里效果并不是很理想。后来发现了一款特别方便的插件vueg让转场实现起来特别方便，分享给需要的人。

使用步骤：

安装：npm i vueg -D

引入：
……
import App from'./App.vue';
import Vueg from'vueg';
import 'vueg/css/transition-min.css';

const router = new VueRouter({……})；

const Voptions= {
duration:'0.3',//转场动画时长，默认为0.3，单位秒
firstEntryDisable:false,//值为true时禁用首次进入应用时的渐现动画，默认为false
firstEntryDuration:'.6',//首次进入应用时的渐现动画时长，默认为.6
forwardAnim:'fadeInRight',//前进动画，默认为fadeInRight
backAnim:'fadeInLeft',//后退动画，默认为fedeInLeft
sameDepthDisable:false,//url深度相同时禁用动画，默认为false
tabs: [],//默认为[]，name对应路由的name,以实现类似app中点击tab页面水平转场效果，如tab[1]到tab[0]，会使用backAnim动画，tab[1]到tab[2]，会使用forwardAnim动画
tabsDisable:false,//值为true时，tabs间的转场没有动画，默认为false
disable:false//禁用转场动画，默认为false，嵌套路由默认为true
};

Vue.use(Vueg,router,Voptions);

至此，就已经有了转场动画啦啦啦啦。

注意事项：需要每个页面检查下，如果样式有错乱则需要加代码调整下

其实vueg动画效果也是用的animate动画库，封装的更好一些。更丰富的配置可以点此查看：vueg的github地址

在电脑上测试没有异常但是到了手机上还是跟之前的方式一样出现一个问题 在某些型号的手机上不够流畅。。。暂时不知道怎么解决