开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情
router-view通过transition渲染component组件
- vue2实现方式
<transition name="fade-right" mode="out-in">
<router-view></router-view>
</transition>
- vue3实现方式
<router-view class="view" v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component"/>
</transition>
</router-view>
<style>
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
transition: 0.5s ease;
}
</style>
- 因为
router-view不能直接返回component组件通过v-slot抛出了Component，所以需要transition包裹实现。- 如果界面会同时出现，可以加上
mode配置，官网链接。- 注意自定义css动画时开始标签
-from需要加上。
以上写法就能实现路由跳转时的过渡动画了，但还是有可能出现无效果，或某些page无效果？
-
检查
transition渲染的component组件中是否含有多个子节点？<!-- A1界面 --> <template> <div>A1</div> <div>A1</div> </template> <!-- A2界面 --> <template> <div>A2</div> <div>A2</div> </template>
- 因为vue3中是支持
template中还有多个子节点，但transition似乎还未能兼容。- 在
transition多个子节点可以使用transition-gruop,但在router-view中使用transition-gruop会抛出错误:
TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
临时解决办法
-
可以像vue2一样在
template中再包一层，可以暂时解决。<!-- A1界面 --> <template> <div> <div>A1</div> <div>A1</div> </div> </template> <!-- A2界面 --> <template> <div> <div>A2</div> <div>A2</div> </div> </template>注意：注释也算子节点，例如以下属于多个根节点
<template> <!-- 注释 --> <div> <div>A2</div> <div>A2</div> </div> </template>
总结
- 使用
transition包裹component组件。 transition的mode属性是否真确。- 动画的
css标签是否填写正确。 - 检查
transition渲染的component组件中是否含有多个子节点。 - 注意检查
template中是否有注释，因为它们同样也会影响到结果。
希望这小小的建议和技巧能帮助你更好的实现过渡动画！
