vue实现动画效果大全

vue要实现动画很简单，同时他提供了很多种实现方式，为了快速入门，这里只讲一种最简单实用的方法，就是结合 animate.css 这个css动画库。

https://animate.style

准备工作

安装animate.css

npm install animate.css --save

在main.ts中导入animate.css

import 'animate.css/animate.min.css'

transition

vue封装了动画组件，我们可以直接使用，只需要用""包裹要添加动画的元素(或组件)， 这里我们要注意的就是触发条件：

  1. 被包裹组件(或元素)上的v-if的值发生变化
  2. 被包裹组件(或元素)上的v-show的值发生变化
  3. 动态组件的is值发生变化的时候也会触发动画，动态组件在业务代码中不常见，这里暂时不讲，记住这个名词即可

App.vue

效果

这里的 animate__animated 代表当前元素使用 animate.css 的动画，这个样式是animate.css自带的，后面的animate__fadeInDown是具体的动画名称。

更多的动画样式名可查看：https://animate.style/

enter-active-class

组件(或元素)的"v-if/v-show"值从"false"变成"true"后，vue会自动给元素增加"enter-active-class"中的样式名，动画执行完毕vue会自动删除元素上添加的"动画样式"。

leave-active-class

与"enter-active-class"，在"v-if/v-show"值从"true"变成"false"后，执行类似操作。

duration

通过duration我们可以指定动画的执行时间。

mode

当""下有2个内容的时候，需要控制下动画触发时机，不然可能会出现"重叠"等意外。

效果

2段文字再点击切换后同时动画，这肯定不是我们要的，mode可以控制2个元素的动画出现顺序。

mode=out-in 让消失动画先执行，再执行显示动画。

反之还有"in-out"，本例显示是要使用"out-in"：

效果

Vue随笔

相关

标签