vue 手机端路由切换滑动_Vue路由切换时的左滑和右滑效果示例

如何实现Vue路由切换时的左滑和右滑效果，因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果，于是突发奇想要做这个功能，看了看QQ、微信都没这样的效果，最后发现SegmentFault(思否) 和掘金两个app都有这样的效果，就以此为参考开始做了。

transition

首先看看官网淡入淡出动画的例子：

Toggle

hello

new Vue({

el: '#demo',

data: {

show: true

}

})

.fade-enter-active, .fade-leave-active {

transition: opacity .5s;

}

.fade-enter, .fade-leave-to {

opacity: 0;

}

左右切换效果

CSS部分

我们要实现的是左右切换的效果，所以要定义两种动画(左滑和右滑)

.transitionBody{

transition: all 0.15s ease; /*定义动画的时间和过渡效果*/

}

.transitionLeft-enter,

.transitionRight-leave-active {

-webkit-transform: translate(100%, 0);

transform: translate(100%, 0);

/*当左滑进入右滑进入过渡动画*/