Vue路由切换时的左滑和右滑效果示例

发布时间：2020-12-17 03:12:43 所属栏目：百科来源：网络整理

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

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

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

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

.transitionLeft-enter,.transitionRight-leave-active {
-webkit-transform: translate(100%,0);
transform: translate(100%,0);
/当左滑进入右滑进入过渡动画/
}

.transitionLeft-leave-active,.transitionRight-enter {
-webkit-transform: translate(-100%,0);
transform: translate(-100%,0);
}

这里的 keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM，我们要把它也包裹在transition标签内，否则页面将重新渲染，切换的动画也会卡顿

在Vue组件中，data必须是一个函数，将对象 {transitionName: ‘transitionLeft'} 挂载到Vue实例中，然后我们可以监听路由的 to 和 from 来判断此时应该左滑还是右滑，来动态切换transition的name值。

arr.indexOf(from.path); this.transitionName = compare ? 'transitionLeft' : 'transitionRight'; } } }

点击链接体验一下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!