共计 2326 个字符，预计需要花费 6 分钟才能阅读完成。
Vue 2.x 中就已经引入的.v-enter-from、.v-enter-to 等）
通用过渡类名
从 Vue 3.x 开始，过渡类名的命名规则发生了一些变化，变得更加直观：
.v-leave-from: 表示进入过渡的初始状态。.v-enter-active: 同样表示过渡生效时的状态。.v-enter-to: 表示进入过渡结束后的状态。
以及离开过渡的类名：
.v-leave-from: 离开过渡的初始状态。.v-leave-active: 离开过渡生效时的状态。.v-leave-to: 离开过渡的最终状态。
.v-leave-from和 .v-leave-from 存在的时间非常的短暂，是过渡开始瞬间的状态，在下一个帧被移除。
.v-enter-active和 .v-leave-active 这两个是真正的动画播放时间，覆盖整个过渡过程，可以用来定义持续时间、延迟和动画曲线等。
v-enter-to 和 v-leave-to 分别表示进入过渡结束状态和离开过渡结束状态，在过渡完成时被添加。
/* 通用过渡动画 */
/* 进入时 */
.v-enter-from{
opacity: 0;
}
.v-enter-active{
transition: .3s;
}
.v-enter-to{
opacity: 1;
}
/* 离开时 */
.v-leave-from{
opacity: 1;
}
.v-leave-active{
transition: 1s;
}
.v-leave-to{
opacity: 0;
}
<transition>
<div v-if="isActive" class="emoji">🌳div>
transition>
<transition>
<div v-if="isActive" class="emoji">🥕div>
transition>
<button type="button" @click="isActive=!isActive">请按下
特定过渡类名(定制动画)
定制特定动画是使用 name 替换 v- 前缀的部分，如果你在 name 属性，那么这个名称将会作为前缀添加到默认的过渡类名上。例如，如果设置了 name="custom"，那么过渡类名会变为：
- 进入：
.custom-enter-from,.custom-enter-active,.custom-enter-to - 离开：
.custom-leave-from,.custom-leave-active,.custom-leave-to
这样可以让你为不同组件或不同类型的过渡设置不同的动画类名，避免样式冲突，并提高代码的可读性。
/* 定制动画 */
.slide-enter-from{
opacity: 0;
transform: translateX(30px);
}
.slide-enter-active{
transform: .3s;
}
.slide-enter-to{
opacity: 1;
}
.slide-leave-from{
opacity: 1;
}
.slide-leave-active{
transform: .3s;
}
.slide-leave-to{
opacity: 0;
transform: translateX(30px);
}
<transition>
<div v-if="isActive" class="emoji">🌳div>
transition>
<transition name="slide">
<div v-if="isActive" class="emoji">🥕div>
transition>
.pluse{
animation-name:pluse;
animation-duration: 1s;
animation-iteration-count: infinite;
}
/* 使用 3D 可以 css 性能优化 ->渲染交给 GPU 加速 动画不要影响周围的文档流 */
@keyframes pluse{
from{
transform: scale3d(1,1,1);
}
50%{
transform: scale3d(1.5,1.5,1.5);
}
to{
transform: scale3d(1,1,1);
}
.pulse-enter-active{
animation:pluse 1s
}
.pulse-leave-active{
animation:pluse 1s
}
<transition>
<div v-if="isActive" class="emoji">🌳div>
transition>
<transition name="pulse">
<div v-if="isActive" class="emoji">🥕div>
transition>
当你只写了animation: pulse 1s;，这意味着你仅提供了animation-name（这里是pulse）和animation-duration（1 秒），而其他子属性将使用其默认值。
关于 from 和to当你省略了它们，实际上是在使用了 0%（相当于from）和 100%（相当于to）的隐含关键字。
Animate.css是一个非常流行的 CSS 动画库，它提供了很多预设的动画效果，可以很容易地给网页元素添加动态效果，而无需编写复杂的动画代码
- 安装 Animate.css 库
要使用 Animate.css, 首先安装 Animate.css 库
npm i animate.css
- 应用动画类: 在你想要添加动画效果的 HTML 元素上，添加对应的 Animate.css 类。
这里我们使用 enter-active 动画使用tada类似“摇晃”的动画效果，leave-active 动画使用bounce会让元素执行一种弹跳动画效果。
/* 在 style 中导入 css 文件 */ @import './styles/animation.css';enter-active-class="animate__animated animate__tada" leave-active-class="animate__animated animate__bounce" > animate__animated是一个必需的基础类，表示该元素将执行动画，而animate__tada和animate__bounce则是具体的动画效果类名。
