出现

Vue 2.x 中就已经引入的<transition>，用于实现元素的过渡动画效果。它允许开发者在元素被插入、更新或移除时应用动画。Vue 3.x 中继续支持并改进了 <transition> 组件，包括对过渡类名的调整以提高清晰度（如使用 .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 分别表示进入过渡结束状态和离开过渡结束状态，在过渡完成时被添加。

css 复制代码

/*通用过渡动画*/
/* 进入时 */
.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">请按下</button>

特定过渡类名(定制动画)

定制特定动画是使用 name 替换 v- 前缀的部分，如果你在 <transition> 组件上指定了一个 name 属性，那么这个名称将会作为前缀添加到默认的过渡类名上。例如，如果设置了 name="custom"，那么过渡类名会变为：

进入：.custom-enter-from, .custom-enter-active, .custom-enter-to
离开：.custom-leave-from, .custom-leave-active, .custom-leave-to

这样可以让你为不同组件或不同类型的过渡设置不同的动画类名，避免样式冲突，并提高代码的可读性。

css 复制代码

    /*定制动画*/
    .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>

动画过渡简写

在CSS中，当你直接在animation属性中指定动画名称和持续时间，如animation: pulse 1s;，是一种简化的写法。CSS动画属性可以包含多个子属性值这与普通动画一样，包括animation-name（动画名称）、animation-duration（动画持续时间）、animation-timing-function（动画速度曲线）、animation-delay（动画延迟）、animation-iteration-count（动画重复次数）、animation-direction（动画播放方向）等。

css 复制代码

.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

Animate.css是一个非常流行的CSS动画库，它提供了很多预设的动画效果，可以很容易地给网页元素添加动态效果，而无需编写复杂的动画代码

安装Animate.css库 要使用 Animate.css,首先安装Animate.css库

css 复制代码

npm i animate.css

应用动画类 : 在你想要添加动画效果的HTML元素上，添加对应的Animate.css类。这里我们使用enter-active动画使用tada类似"摇晃"的动画效果，leave-active动画使用bounce 会让元素执行一种弹跳动画效果。
使用

arduino 复制代码

/*在style中导入css文件*/
@import './styles/animation.css';

        <transition 
          enter-active-class="animate__animated animate__tada"
          leave-active-class="animate__animated animate__bounce"
        >

animate__animated是一个必需的基础类，表示该元素将执行动画，而animate__tada和animate__bounce则是具体的动画效果类名。

vue3 <transition> 组件过渡动画速过

出现

动画钩子

通用过渡类名

特定过渡类名(定制动画)

动画过渡简写

动画库animate