效果展示 CSS 滑入和滑出的动画 .twofade-enter {transfORM: translateX(100%);} .twofade-enter-active {tra
效果展示
.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;}
使用 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:""
}
}
}
通过监听路由的变化 知道是返回还是打开新页面 在通过在变量 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 路由过渡动效内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue 路由切换过渡动效滑入滑出效果的实例代码
本文链接: https://www.lsjlt.com/news/144239.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0