vue+vue-router转场动画的实例代码

前端之家收集整理的这篇文章主要介绍了vue+vue-router转场动画的实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Vue+WebPack+HBuilder 项目记录

项目搭建完毕了,但是由于是单页应用嵌入HBuilder的时候无法利用它的转场动画,于是找到了vue的转场动画写法,使体验与APP靠近,在此记录;

1.首先我们要监听路由然后判断其是前进还是后退,来实现不同的动画

2.template

3.css;修改css得到不同的效果

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

猜你在找的Vue相关文章