vue 路由切换过渡动效滑入滑出效果的实例代码
作者：想上天与太阳并肩
在支付宝账单页面有这样一个特效切换过渡动效滑入滑出效果，非常方便实用，那么这个功能如何实现的呢？下面小编通过vue实现路由切换过渡动效滑入滑出效果，感兴趣的朋友一起看看吧
效果展示
css 滑入和滑出的动画
.twofade-enter {transform: translateX(100%);}
.twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;}
.twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;}
.twofade-leave-to {transform: translateX(-100%);}
.threefade-enter {transform: translateX(-100%);}
.threefade-leave-to {transform: translateX(100%);}
.threefade-enter-active {transition: all 0s;position: absolute;z-index: 2;}
.threefade-leave-active {transition: all .3s;position: absolute;z-index: 999;height: 100%;background:#ececec;}transition
使用 vue提供的 transition 标签，data中定义 transitionName 变量
<template>
<div id="app">
<transition :name="transitionName">
<router-view></router-view>
</transition>
</div>
</template>
export default {
name:"App",
data(){
return{
transitionName:""
}
}
}watch 监听路由的变化
通过监听路由的变化 知道是返回还是打开新页面 在通过在变量 transitionName 赋不同的值改变动画
watch:{
$route(to, from) {
if(to.meta.index > from.meta.index){
this.transitionName = 'twofade';
}else if(to.meta.index < from.meta.index){
this.transitionName = 'threefade';
}
}
}可能遇到的问题
关于样式 操作上在切换中可能会有遇到样式的问题 需要调整样式来达到自己需要的效果
我的解决方法是
#app{//width: 100%;height: 100%;overflow-x: hidden;position: absolute;
&>div{width: 100%;min-height: 100vh;}
}到此这篇关于vue 路由切换过渡动效 滑入 滑出效果的文章就介绍到这了,更多相关vue 路由过渡动效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！