vue3的路由中如何使用transition；Transition + Component实现路由跳转浅入浅出效果

说明

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>