引入

在JavaScript中有多种方式，可以实现状态变化的过渡和动画。最常见的一种就是用CSS transition属性来创建动画效果。这通常涉及到修改元素的CSS类。

这里我们以一个点击出现Emoji的卡片Vue组件为例：

<template>
  <div class="page">
    <div class="card">
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
      <div class="card__content">
        <div :class="['emoji', {hidden: !isActive}]">👄</div> 
      </div>
      <div class="card__action">
        <button type="button" @click="toogleEmoji">请按这里</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = 'Vue动画效果';
const isActive = ref(true);
const toogleEmoji = () => {
  isActive.value = !isActive.value;
}

</script>

<style  scoped>
@import './styles/app.css';
@import './styles/card.css';
@import './styles/animation.css';

</style>

这里我们编写一个卡片样式的组件，主要为我们展示Emoji表情的过渡和动画效果：当表达式isActive的值为true时，为Emoji容器再添加一个动态类名hidden，用于设置隐藏的CSS属性。组件的CSS样式，我们使用 CSS 的 @import 规则来引入外部的 CSS 文件。

卡片组件的CSS属性就不展示了，这里重点给大家展示Emoji相关的CSS属性：

//app.css
.emoji {
  font-size: 100px;
  transition: 0.5s;
}

.hidden {
  opacity: 0;
  transform: translateX(30px);
}

过渡效果： 这里我们将Emoji的大小设置为100px，transition: 0.5s表示emoji进入和离开的过渡时间为0.5s。当点击按钮时，hidden动态类名被绑定，CSS属性被触发，opacity: 0将emoji的透明度设置为0，即把元素隐藏起来，transform: translateX(30px)表示把元素沿X轴正方向平移30px，这样emoji在隐藏的同时还会有一个平移的效果。

---

动画效果： 我们先将Emoji的动态类名hidden修改为pulse(脉冲)，意味着我们要实现一个脉冲的动画效果。接着我们在'animation.css'中编写样式：

.pulse{
    animation-name: pulse; //动画名称：pulse
    animation-duration: 1s; // 动画持续时间：1s
    animation-iteration-count: infinite; //动画迭代次数：无限次（动画一直循环播放，直到元素被移除或动画被停止）
}

/* 关键帧动画 */
@keyframes pulse {
    from{
        transform: scale3d(1,1,1);
    }
    50%{
        transform: scale3d(1.5,1.5,1.5);
    }
    to{
        transform: scale3d(1,1,1);
    }
}

其中，@keyframes规则用于定义动画的各个关键帧，控制动画在不同时间节点的状态变化。from，50%，to分别表示动画开始，进行到一半以及结束时的状态。

scale3d(1.5,1.5,1.5)这是一个转换函数，用于将元素在三维空间中进行缩放,这样就能实现立体的缩放效果。 当这个函数和transform一起使用时有几个好处：

• 浏览器会为其启用GPU加速渲染，提升性能
• 浏览器会为其创建一个合成层，使动画的缩放不会影响到其他页面中的元素

---

介绍完CSS中的transition属性实现进入和离开的动画效果，再给大家介绍一下Vue中内置组件<Transition>是如何实现过渡和动画效果的。

< Transition >

首先，<Transition>是一个内置组件，这意味着它可以在任意组件内被使用且无需注册。

基本用法

当我们想通过<Transition>给某个元素或组件添加进入和离开动画时，只需要把它传递给<Transition>组件即可。且进入和离开可以由以下条件触发：

• 由v-if指令触发的切换
• 由v-show指令触发的切换
• 由<component>切换的动态组件
• 改变特殊的key属性

代码示例

<template>
...
    <transition>
        <div v-if="isActive" class="emoji">👄</div>
     </transition>
 ...
 </template>
 
 <script setup>
...
const isActive = ref(true);
...
</script>

//app.css
.v-enter-from{
    opacity: 0;
}

.v-enter-active{
    transition: 1s;
}

.v-enter-to{
    opacity: 1;
}

.v-leave-from{
    opacity: 1;
}

.v-leave-active{
    transition: 1s;
}

.v-leave-to{
    opacity: 0;
}

这里我们给Emoji元素添加一条v-if指令，并将isActive的值设置为响应式，初始值为true，这样页面默认会先显示emoji。

<transition>中一共有6个应用于进入与离开过渡效果的 CSS class：

• v-enter-from：定义元素在过渡开始时的样式，当元素被插入到DOM中，这个样式会被立即添加并会在元素插入完成后的下一个帧立即移除。
• v-enter-active:在整个进入过渡阶段应用的样式，在元素被插入之前添加，在过渡或动画完成之后移除。在这里可以定义进入动画的持续时间、延迟与速度曲线类型。
• v-enter-to:定义元素在进入过渡结束时的样式。在元素被插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
• v-leave-from:定义元素在离开过渡开始时的样式。在过渡被触发时且元素已经被删除时立即添加，并在下一帧立即移除。
• v-leave-active:在整个离开过渡阶段应用的样式，在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。在这里可以定义离开动画的持续时间、延迟与速度曲线类型。
• v-leave-to:定义元素在离开过渡结束时的样式。在离开动画被触发后的下一帧被添加(也就是 v-leave-from 被移除的同时)，在离开过渡或动画完成之后被移除。 小tips： 我们可以给<transition>组件传一个参数name来声明过渡效果名，比如<transition name="kiss">, 这样对于一个有名字的过渡效果，那么它的过渡class将都会以它的名字为前缀而不是v，即kiss-enter-from。

因为这里没有给emoji设置进入和离开的动画，只设置了进入前后和离开前后的透明度，所以在页面上会是淡入和淡出的效果。

---

可自定义过渡class

<Transition>组件具有class特性，我们可以向 <Transition> 传递以下的参数来指定自定义的过渡 class：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

这个特性在我们想引入第三方CSS库时非常有用。

第三方CSS库——Animate.css

Animate.css是一个第三方的CSS库，我们可以通过安装它轻松实现很多动画效果。

• 安装步骤非常简单

1. 在项目的命令行输入 npm i animate.css并安装
2. 在main.js中引入： import 'animate.css'

• 使用示例

<transition
    class="kiss-animate"
    enter-active-class="animate__animated animate__jello"
    leave-active-class="animate__animated animate__bounce"
 >
    <div v-if="isActive" class="emoji">👄</div>
</transition>

除了jello和bounce这两个动画以外，在Animate.css的官方文档Animate.css | A cross-browser library of CSS animations.里，还有许多动画效果，我们可以在页面上试用并复制到项目中直接使用。

---

总结

Vue中的内置组件<Transitoin>是一个非常有用的特性，我们可以通过它在元素或组件的切换过程中应用过渡效果，且可以很好地和外部CSS库Animate.css一起使用，以此实现多样的过渡和动画效果。

以上就是这篇文章的全部内容，希望能帮助到大家！！