【Vue3 第二十二章】过渡动画

Vue3 + Vite + VueRouter + Pinia + Axios + Element Plus + 项目实战（持续更新中…）

一、基本用法

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

• 由 v-if 所触发的切换
• 由 v-show 所触发的切换
• 由特殊元素 切换的动态组件

1.1 最基本用法的示例

仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。

搭配原生 CSS 过渡 和 原生 CSS 动画 使用，可以实现更加细腻的动画展示效果。

可以通过 transitionend 或 animationend 监听过渡和动画的事件。

1.2 一些附加描述

可以通过 type 属性显式告诉 Vue 需要关心哪种类型，传入的值是 animation 或 transition。这在同时使用animation 或 transition时是非常有用的

...

如果你想在某个节点初次渲染时应用一个过渡效果，你可以添加 appear prop

...

可以通过 mode 属性指定过渡模式，属性值：in-out 和 out-in

...

使用深层级的 CSS 选择器，在 嵌套的深层级的元素上触发过渡效果