请选择 进入手机版 | 继续访问电脑版

Vue过场动画判断是进入还是退出 一行代码 完美解决

[复制链接]
轩峰毅飞 发表于 2021-1-3 09:50:49 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
在Vue开辟中 我们有时需要给场景切换加上一个过场动画 但是有一个困难 过场动画如何判定到底是进还退出的
我在网上也找过许多方法,比如最常见的就是给路由的meta中加一个标识 通过标识判定巨细 从而知道是退是进
但是如果路由许多,怎么办,那要判定标识都是一个困难,
苦思冥想许久,突然想到一个究极办理办法,我们可以通逾期间来判定啊,我们在路由守卫中,每当进入一个路由之前,
给他加个时间戳
  1. router.beforeEach(async (to, from, next) => {     if(!to.meta.Time)          to.meta.Time = new Date().getTime().toString();});
复制代码
然后直接判定时间戳的巨细不就行了吗,
时间戳大的肯定是进啊,小的肯定是退出啊,
通过它不就可以判定是前进是退出了吗
  1. $route: {         handler: function(route,oldRoute) {          let to,from;          if(route) to = route.meta.Time;          if(oldRoute) from = oldRoute.meta.Time;          if(to < from){              //设置动画名称 出来是从左往右              this.transitionName = &#39;slide-right&#39;;          }else{              // 进去是从右往左              this.transitionName = &#39;slide-left&#39;;          }        },        immediate: true},
复制代码
  1.       .router{        width:100%}.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active {  will-change: transform;  transition: all 500ms;  position: absolute;}.slide-right-enter {  opacity: 0;  transform: translate3d(-100%, 0, 0);}.slide-right-leave-active {  opacity: 0;  transform: translate3d(100%, 0, 0);}.slide-left-enter {  opacity: 0;  transform: translate3d(100%, 0, 0);}.slide-left-leave-active {  opacity: 0;  transform: translate3d(-100%, 0, 0);}
复制代码
 
 

来源:https://blog.csdn.net/tdl081071tdy/article/details/112009957
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )