vue3进入页面实现动画效果
发布时间
阅读量：
阅读量
2-1. 入场钩子：
before-enter(el)： 入场前，接收两个参数el(元素本身)、done()通知动画结束回调
enter(el, done)： 入场时执行的函数；接收两个参数el(元素本身)、done()通知动画结束回调, 只有done()执行完毕才会通知transition组件执行after-enter钩子。详细使用会在下面举例。
after-enter(el)： 入场后动画钩子
2-2. 出场钩子同上：
before-leave()在离开前接受元素本身与动画完成回调；
leave()在离开时触发并根据情况处理完成回调；
after-leave()在离开后自动触发。
例子：
App.vue
<RouterView v-slot="{ Component, route }" v-if="isRouterAlive">
<transition name="fade" mode="out-in" @after-enter="handleAfterEnter">
<component :is="Component" :key = "handleDate()" />
</transition>
</RouterView> const handleAfterEnter=()=> {
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: all 0.5s;
}
// 进入前和离开后为透明，并在右侧20px位置
.fade-right-enter-from,
.fade-right-leave-to{
opacity: 0;
transform: translateX(20px);
}全部评论 (0)
还没有任何评论哟~