# 09 | 动画:Vue中如何实现动画效果?
你好,我是大圣。
在上一讲中,我给你讲解了组件化设计的思路,有了组件,我们就可以积木式地搭建网页了。领会组件设计的思路后,小圣继续丰富了清单组件的功能,在组件的功能实现完毕后,我给他提出了一个新的要求,希望能有一些动画效果的加入,让这个应用显得不再这么生硬。
小圣自己琢磨以后,又找过来咨询我Vue 3中实现动画的方式,所以今天我就来跟你聊一下Vue中应该如何实现常见的过渡和动效。在讲解过程中,我们会继续给之前那个清单应用添砖加瓦,给它添加更多酷炫的玩法,让我们正式开始今天的学习吧。
## 前端过渡和动效
在讲Vue中的动效和过渡之前,我想先跟你聊一下前端的过渡和动效的实现方式。举个例子,假设我现在有这样一个需求:在页面上要有一个div标签,以及一个按钮,点击页面的按钮后,能够让div标签的宽度得到增加。
在下面的代码中,我们可以实现上面所说的这个效果。这段代码里,首先是一个div标签,我们使用width控制宽度。我们想要的前端效果是,每次点击按钮的时候,div标签的宽度都增加100px。
```xml
```
这个功能实现的效果图如下,小圣虽然实现了需求中提到的功能,但是现在的显示效果很生硬,这点你从下面的动态效果图中也能看出来。
![图片](https://static001.geekbang.org/resource/image/0a/ef/0a52318a2a136bebbe711a70e5b2f0ef.gif?wh=991x310)
为了优化显示的效果,首先我们可以通过一个CSS的属性transition来实现过渡,实现方式非常简单,直接在div的样式里加上一个transition配置就可以了。下面是具体的实现,其中我们给transition配置了三个参数,简单解释呢,就是div的width属性需要过渡,过渡时间是1秒,并且过渡方式是线性过渡。
```xml
```
添加上述transition配置后,前端页面会显示如下的过渡效果,是不是流畅了一些呢?实际上,日常项目开发中类似的过渡效果是很常见的。
![图片](https://static001.geekbang.org/resource/image/dd/e4/dd5bcf6e3dbcb4bd84f97093bc0a08e4.gif?wh=991x310)
现在你能看到,**我们可以通过transition来控制一个元素的****属****性的值,缓慢地变成另外一个值,这种操作就称之为过渡**。除了transition,我们还可以通过animation和keyframe的组合实现动画。
在下面的代码中,我们指定标签的antimation配置,给标签设置move动画,持续时间为两秒,线性变化并且无限循环。然后使用@keyframes 定制move动画,内部定义了动画0%、50%和100%的位置,最终实现了一个方块循环移动的效果。
```xml
.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}
}
```
上面代码的实现效果如下:
![图片](https://static001.geekbang.org/resource/image/8c/20/8c070a460f13cb979cc393b55ac6a420.gif?wh=991x310)
这就是实现前端动画最简单的方式了,在网页应用开发的场景下,或多或少都会有过渡动画的使用需求。从最基本的颜色和位置的渐变,到页面切换都是动画的应用场景,这些动画在视觉和心理的体验上更加友好,比如等待时间的Loading加载提示,弹窗出现的显示动画等。
## Vue 3动画入门
通常我们实现的动画,会给Web应用带来额外的价值。动画和过渡可以增加用户体验的舒适度,让变化更加自然,并且可以吸引用户的注意力,突出重点。transition和animation让我们可以用非常简单的方式实现动画。那么在Vue 3中,我们到底该如何使用动画呢?
Vue 3中提供了一些动画的封装,使用内置的transition组件来控制组件的动画。为了让你先有一个感性的认识,这里我们先来举一个最简单的例子:我们可以使用一个按钮控制标题文字的显示和隐藏,具体的代码如下,通过点击按钮,就可以控制h1标签的显示和隐藏。
```xml
你好 Vue 3
```
在Vue中,如果我们想要在显示和隐藏标题文字的时候,加入动效进行过渡,那么我们直接使用transition组件包裹住需要动画的元素就可以了。
在下面代码中,我们使用transition包裹h1标签,并且设置了name为fade,Vue会在h1标签显示和隐藏的过程中去设置标签的class,我们可以根据这些class去实现想要的动效。
```xml
你好 Vue 3