vue 滚动行为+过度动效 滚动行为消失
发布于 7 年前 作者 starm328 4955 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

我滚动行为加上路由过度效果之后,点击返回的滚动行为灭有用了。大神帮我看看什么问题,还是说我这里写的有问题 //html <transition :name="transitionName"> <router-view class="fadb"></router-view> </transition>

//js watch : { $route(to, from){ let isBack = this.$router.isBack if (isBack) { this.transitionName = ‘fade-back’;

	} else {
		   this.transitionName = 'fade'
	}
		// 做完回退动画后,要设置成前进动画,否则下次打开页面动画将还是回退
		this.$router.isBack = false
},

},

//style
.fade-enter-active, .fade-leave-active,.fade-back-enter-active, .fade-back-leave-active{ transition: transform 0.2s linear; transform: translate(0%, 0); } .fade-leave-to,.fade-back-enter{transform: translate(-100%, 0);} .fade-enter,.fade-back-leave-to { transform: translate(100%, 0); } .fade-enter-active.fadb, .fade-leave-active.fadb,.fade-back-enter-to.fadb{ position: fixed; width: 100%; max-width: 375px; height: 100%; top:0; background: #f1f1f1; overflow:hidden; } .fade-enter.fadb, .fade-leave-to.fadb{ position: fixed; top:0; width: 100%; height: 100%; background:#f1f1f1; overflow:hidden; }

//路由 scrollBehavior (to,from,savedPosition){ return {x:1,y:0}; }

回到顶部