想做点花哨的动画吗，让你的界面更加活灵活现。本文将带大家了解vue中负责添加动画的<transition>组件以及专业的动画库Animate.css。
transition组件
举个例子：
这是一个小列车：
如果我给它加上这样的css，在让它出现和消失的动画会是怎么样的呢？
首先，我们给小列车添加v-if：
添加一个按钮附上点击事件：
定义点击事件：
效果
从右边慢慢从透明显示到中间：
从中间慢慢消失在左边：
各属性的含义
基础属性：
opacity：透明度，0则透明，1则完全显现。
transform：变换，如用的是translateX(600px)就是从右边600px开始，translateX(-600px)则从左边600px开始，还有translateY即上下。
transition：变换时间，这个过程花费的时间。
状态属性：
.name-enter-from：显现的初始状态
.name-enter-active：显现的过程
.name-enter-to：显现的最后状态（尽管这里写透明度为多少，最后都会变成1的透明度）
.name-enter-from：消失的初始状态
.name-enter-active：消失的过程
.name-enter-to：消失的结束状态（尽管这里写透明度为多少，最后都会变成0的透明度，也就是完全消失）
拓展
变大变小
scale3d用于三维缩放，scale用于二维缩放。
transform还有许多其他的属性：
rotate()
用于旋转元素。
rotate()可以按照指定的角度旋转元素，rotateX(),rotateY(), 和rotateZ()分别在x轴、y轴和z轴上旋转元素。示例：
transform: rotate(45deg);或transform: rotateX(90deg);skew()
用于倾斜元素。
skewX()和skewY()分别在x轴和y轴上倾斜元素。示例：
transform: skewX(20deg);matrix() 和 matrix3d()
这些函数允许你通过矩阵来应用更复杂的转换。
matrix()是一个二维的变换，而matrix3d()是一个三维的变换。perspective()
不是一个变换函数，但它用于定义元素的透视距离，影响3D变换的效果。
perspective可以作为一个独立的属性，也可以作为变换的一部分。示例：
transform: perspective(1000px);origin 属性
虽然不是
transform的一部分，但是transform-origin属性可以设定变换的参考点，即元素的哪个部分是变换的中心。示例：
transform-origin: 50% 50%;
animation
关键帧（@keyframes）: 关键帧使用
@keyframes规则定义，用于设置动画中的不同状态。它们描述了动画从开始到结束的各个阶段。例如，你可以定义动画的开始状态、中间状态和结束状态：
想必大家看到这个拳头的emoji就知道效果是怎样的了，就是一个拳头在不停地锤屏幕前的你。
基础属性：
animation-duration: 一次动画的时间。animation-iteration-count: 动画执行的次数，上面的infinite意为无终止的，即反复执行动画。animation-delay: 设置动画开始前的延迟时间。animation-direction: 控制动画是否反向播放。animation-fill-mode: 设置动画开始前或结束后元素的样式。animation-play-state: 控制动画是否暂停或运行。
Animate.css(专业的动画库)
里面包含了各种动画，只有你想不到，没有它做不到。
使用示例：
注意：外面还是要套一层transition，再加上动画库中配好的类名。
结语
动画效果不仅可以让界面看得更加流畅舒服，还可以在使用网页的各种操作时得心应手，大幅提升用户体验，所以身为一个前端er，会制作动画是一个很大的加分项。
