19_Vue3-实现过渡动画.pptx

Vue3 实现过渡动画 Vue3 提供了 transition 内置组件来完成动画，通过使用 transition 组件，我们可以给任何元素和组件添加进入/离开过渡动画。 transition 组件可以自动嗅探目标元素是否应用了 CSS 过渡或者动画，并在恰当的时机添加/删除 CSS 类名。 transition 组件的原理是通过添加/删除 CSS 类名来实现动画。这些类名包括： * v-enter-from：定义进入过渡的开始状态。 * v-enter-active：定义进入过渡生效时的状态。 * v-enter-to：定义进入过渡的结束状态。 * v-leave-from：定义离开过渡的开始状态。 * v-leave-active：定义离开过渡生效时的状态。 * v-leave-to：离开过渡的结束状态。 这些类名可以被用来定义进入和离开过渡的过程时间、延迟和曲线函数。 在使用 transition 组件时，我们可以通过设置 name 属性来指定 class 的命名规则。如果我们使用的是一个没有 name 的 transition，那么所有的 class 是以 v- 作为默认前缀。如果我们添加了一个 name 属性，比如 <transtion name="why">，那么所有的 class 会以 why- 开头。 此外，我们还可以通过 animation 来实现动画效果。Vue 可以自动识别动画类型，并设置监听 transitionend 或 animationend 事件来知道过渡的完成。如果我们同时使用了过渡和动画，可以通过设置 type 属性来明确的告知 Vue 监听的类型。 在设置过渡动画时，我们还可以通过 duration 属性来指定过渡的时间。duration 可以设置两种类型的值：number 类型和 object 类型。number 类型同时设置进入和离开的过渡时间，而 object 类型分别设置进入和离开的过渡时间。 在某些情况下，我们可能需要显示的指定动画时间，以避免同时执行进入和离开动画。例如，我们可以使用 keyframe 动画来指定动画时间。 Vue3 提供了 transition 和 animation 两个组件来实现过渡动画，通过设置不同的类名和属性，我们可以实现各种复杂的动画效果。