vue3在路由组件上实现过渡效果
说明
Transition + Component实现路由跳转浅入浅出效果
transition组件
- transition为内置组件,能实现组件进入和离开的过渡效果
- 在某个节点初次渲染时应用一个过渡效果,可以添加 appear
Component组件
- 是一种内置特殊元素,性质类似于slot,会动态绑定页面中的组件(components)
- 渲染的实际组件由 is prop 决定,通过属性is的值可以渲染不同的组件
css样式定义
- 定义过渡效果
.动画name-enter-active .动画name-leave-active{
transition: all 0.3s;
}
.动画name-enter-from, .动画name-leave-to{
transform: translate3d(100% , 0 , 0);
}
模板中
- 在router-view中嵌套transition
<router-view v-slot="{Component}">//指向Component这个变量
<transition appear name="动画name">
//动态组件,指向Component
<component :is="Component" :data="selectedSinger"/>
</transition>
</router-view>