Vue3根组件设置Transition失效的问题

Vue3根组件设置Transition失效的问题总结

正菜来了⛳⛳⛳

🎈Vue3根组件设置Transition失效

温馨提醒：都是bug总结

🍮写法改变

不正确的写法：会报警告
 <div>
   <transition :name="'child'" mode="out-in">
     <router-view  />
   </transition>
 </div>

改：

 <router-view v-slot="{ Component }">
   <Transition name="child" mode="out-in">
     <component :is="Component" />
   </Transition>
 </router-view>

🍮Transition失效解决

要出发动画需要触发条件，后边有补充，先说解决方法

<router-view v-slot="{ Component }">
   <Transition name="child" mode="out-in">
     <component :is="Component" :key="route.path" />
   </Transition>
 </router-view>

多了一个:key,绑定key作为一个触发条件，保证key绑定的值的唯一性

每当路由发生变化时，$route.fullPath 的值会发生变化，因为它会随着新的路由而更新。 这就意味着，每当路由切换时， 组件的 key 会变化，从而触发 Vue.js 重新渲染组件。 在重新渲染的过程中，过渡效果会应用于离开的旧组件和进入的新组件，从而实现平滑的过渡效果。

🎈Transition知识点总结

Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画：

1. 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。
2. 会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。我们将在下一章节中介绍。

触发条件：

Transition是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发：

1. 由 v-if 所触发的切换
2. 由 v-show 所触发的切换
3. 由特殊元素 切换的动态组件
4. 改变特殊的 key 属性

本次解决的点就在：改变特殊的 key 属性