想做点花哨的动画吗，让你的界面更加活灵活现。本文将带大家了解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，会上动画是一个很大的加分项。