看上去高端的网站,wordpress转ios,北京建设工程网站,山姆超市网上购物网说明 vue路由切换时#xff0c;当前页面左侧和右侧容器分别从两侧滑出#xff0c;新页面左右分别从两侧滑入 效果展示
路由切换-滑入滑出效果 难点和踩坑
现路由和新路由始终存在一个页面根容器#xff0c;通过transition组件#xff0c;效果只能对页面根容器有效…说明 vue路由切换时当前页面左侧和右侧容器分别从两侧滑出新页面左右分别从两侧滑入 效果展示
路由切换-滑入滑出效果 难点和踩坑
现路由和新路由始终存在一个页面根容器通过transition组件效果只能对页面根容器有效。如果通过组件页面级路由守卫进入、退出来改变受控变量模版对左右容器v-if transition设置效果。 路由切换是一瞬间的事滑出动画来不及触发路由就改变了所有页面都需要改造我确实没找到路由守卫进入事件 只有 import { onBeforeRouteLeave, onBeforeRouteUpdate } from vue-router 如果纯通过onMounted和onUnMounted等钩子实现和2的问题基本差不多
实现方式
基于template组件的钩子函数完全自主实现过渡效果.
钩子函数说明beforeEnter在元素被插入到 DOM 之前被调用enter在元素被插入到 DOM 之后的下一帧被调用afterEnter当进入过渡完成时调用。enterCancelled当进入过渡在完成之前被取消时调用beforeLeave在 leave 钩子之前调用, 大多数时候你应该只会用到 leave 钩子leave在离开过渡开始时调用afterLeave在离开过渡完成, 且元素已从 DOM 中移除时调用leaveCancelled仅在 v-show 过渡中可用
直接上代码
router-view 改造
router-view v-slot{ Component }transitionmodedefault:cssfalsebefore-leaveonBeforeLeavebefore-enteronBeforeEnterenteronEnterleaveonLeavecomponent :isComponent/component/transition
/router-view钩子函数
/*** left-wrap和right-wrap 为路由页面中左右两侧模块*/// 退出前的钩子
const onBeforeLeave (el: any) {const left el.querySelector(.left-wrap)const right el.querySelector(.right-wrap)if (!left || !right) {return}left.style.transform translateX(0)right.style.transform translateX(0)
}
// 退出时的钩子
const onLeave (el: any, done: Function) {const left el.querySelector(.left-wrap)const right el.querySelector(.right-wrap)if (!left || !right) {done()return}left.style.transition all 0.3s linearright.style.transition all 0.3s linearleft.style.transform translateX(-120%)right.style.transform translateX(120%)/*** 这里延迟done是为了过渡效果完成后再彻底退出* 如果将时长改大一点, 页面审查元素就能看到,* 路由切换时, 当前路由和新路由同时存在于页面, 当定时结束,done被调用时, 原路由组件才消失*/setTimeout(() {done() // 完成过渡}, 300)
}// 进入前的钩子
const onBeforeEnter (el: any) {const left el.querySelector(.left-wrap)const right el.querySelector(.right-wrap)if (!left || !right) {return}left.style.transform translateX(-120%)right.style.transform translateX(120%)
}
// 进入时的钩子
const onEnter (el: any, done: Function) {const left el.querySelector(.left-wrap)const right el.querySelector(.right-wrap)if (!left || !right) {done()return}left.style.transition all 0.5s linearright.style.transition all 0.5s linear// 这里延时是为了等待原路由退出效果完成, 再为新路由组件设置进入效果setTimeout(() {left.style.transform translateX(0)right.style.transform translateX(0)done() // 完成过渡}, 300)
}总计
多调整参数看效果就能大概猜出transition组件的实现原理通过钩子函数自定义过渡或动画效果可操作性确实大就是有点麻烦
