2-1.入场钩子:
before-enter(el):入场前,接收两个参数el(元素本身)、done()通知动画结束回调
enter(el,done):入场时执行的函数;接收两个参数el(元素本身)、done()通知动画结束回调,只有done()执行完毕才会通知transition组件执行after-enter钩子。详细使用会在下面举例。
after-enter(el):入场后动画钩子
2-2.出场钩子,同上:
before-leave(el):出场前,接收两个参数el(元素本身)、done()通知动画结束回调
leave(el,done):出场时执行的函数;接收两个参数el(元素本身)、done()通知动画结束回调
after-leave(el):出场后动画钩子。
例子:
App.vue
<RouterViewv-slot="{Component,route}"v-if="isRouterAlive"><transitionname="fade"mode="out-in"@after-enter="handleAfterEnter"><component:is="Component":key="handleDate()"/></transition></RouterView>consthandleAfterEnter=()=>{if(window.scrollY!=0){window.scroll(0,0)}}//进入后和离开前保持原位.fade-right-enter-to,.fade-right-leave-from{opacity:1;transform:none;}//设置进入和离开过程中的动画时长0.5s.fade-right-enter-active,.fade-right-leave-active{transition:all0.5s;}//进入前和离开后为透明,并在右侧20px位置.fade-right-enter-from,.fade-right-leave-to{opacity:0;transform:translateX(20px);}