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转场动画的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。