Vue+WebPack+HBuilder 项目记录
项目搭建完毕了，但是由于是单页应用嵌入HBuilder的时候无法利用它的转场动画，于是找到了vue的转场动画写法，使体验与APP靠近，在此记录；
1.首先我们要监听路由然后判断其是前进还是后退，来实现不同的动画
2.template
Box-sizing: border-Box;
Box-sizing: border-Box;
transition: all .6s cubic-bezier(.55,.1,1);
}
.slide-left-enter,.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(-80px,0);
transform: translate(-80px,0);
}
.slide-left-leave-active,.slide-right-enter {
opacity: 0;
-webkit-transform: translate(100%,0);
transform: translate(100%,0);
}
上面动画可作为不同级页面的转场动画，下面可作为同级页面转场动画，无需监听路由
1.template
2.css
以上这篇vue+vue-router转场动画的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/vue/30561.html