你好，我是大圣。

在上一讲中，我给你讲解了组件化设计的思路，有了组件，我们就可以积木式地搭建网页了。领会组件设计的思路后，小圣继续丰富了清单组件的功能，在组件的功能实现完毕后，我给他提出了一个新的要求，希望能有一些动画效果的加入，让这个应用显得不再这么生硬。

小圣自己琢磨以后，又找过来咨询我 Vue 3 中实现动画的方式，所以今天我就来跟你聊一下 Vue 中应该如何实现常见的过渡和动效。在讲解过程中，我们会继续给之前那个清单应用添砖加瓦，给它添加更多酷炫的玩法，让我们正式开始今天的学习吧。

前端过渡和动效

在讲 Vue 中的动效和过渡之前，我想先跟你聊一下前端的过渡和动效的实现方式。举个例子，假设我现在有这样一个需求：在页面上要有一个 div 标签，以及一个按钮，点击页面的按钮后，能够让 div 标签的宽度得到增加。

在下面的代码中，我们可以实现上面所说的这个效果。这段代码里，首先是一个 div 标签，我们使用 width 控制宽度。我们想要的前端效果是，每次点击按钮的时候，div 标签的宽度都增加 100px。

<template>

  <div class="box" :style="{width:width+'px'}"></div>
  <button @click="change">click</button>
</template>

<script setup>
import {ref} from 'vue'
let width= ref(100)
function change(){
  width.value += 100
}
</script>

<style>
.box{
  background:red;
  height:100px;
}
</style>

这个功能实现的效果图如下，小圣虽然实现了需求中提到的功能，但是现在的显示效果很生硬，这点你从下面的动态效果图中也能看出来。

为了优化显示的效果，首先我们可以通过一个 CSS 的属性 transition 来实现过渡，实现方式非常简单，直接在 div 的样式里加上一个 transition 配置就可以了。下面是具体的实现，其中我们给 transition 配置了三个参数，简单解释呢，就是 div 的 width 属性需要过渡，过渡时间是 1 秒，并且过渡方式是线性过渡。

<style>
.box{
  background:#d88986;
  height:100px;
  transition: width 1s linear;
}
</style>

添加上述 transition 配置后，前端页面会显示如下的过渡效果，是不是流畅了一些呢？实际上，日常项目开发中类似的过渡效果是很常见的。

现在你能看到，**我们可以通过 transition 来控制一个元素的属性的值，缓慢地变成另外一个值，这种操作就称之为过渡。**除了 transition，我们还可以通过 animation 和 keyframe 的组合实现动画。

在下面的代码中，我们指定标签的 antimation 配置，给标签设置 move 动画，持续时间为两秒，线性变化并且无限循环。然后使用 @keyframes 定制 move 动画，内部定义了动画 0%、50% 和 100% 的位置，最终实现了一个方块循环移动的效果。

.box1{
  width:30px;
  height:30px;
  position: relative;
  background:#d88986;
  animation: move 2s linear infinite;
}
@keyframes move {
  0% {left:0px}
  50% {left:200px}
  100% {left:0}
}

上面代码的实现效果如下：

这就是实现前端动画最简单的方式了，在网页应用开发的场景下，或多或少都会有过渡动画的使用需求。从最基本的颜色和位置的渐变，到页面切换都是动画的应用场景，这些动画在视觉和心理的体验上更加友好，比如等待时间的 Loading 加载提示，弹窗出现的显示动画等。