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

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

App.vue

<template>
  <div>
    <button @click="isShow = !isShow">切换</button>

    <transition
      :duration="1000"
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
    >
      <p v-if="isShow">hello</p>
    </transition>
  </div>
</template>

<script>
import "animate.css";
import { defineComponent } from "vue";
export default defineComponent({
  data() {
    return {
      isShow: true,
    };
  },
});
</script>

效果

这里的 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

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

<template>
  <transition
    :duration="1000"
    enter-active-class="animate__animated animate__fadeInDown"
    leave-active-class="animate__animated animate__fadeOutUp"
  >
    <p v-if="isShow">hello</p>
    <p v-else>你好</p>
  </transition>
</template>

效果

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

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

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

<template>
  <transition
+   mode="out-in"
    :duration="1000"
    enter-active-class="animate__animated animate__fadeInDown"
    leave-active-class="animate__animated animate__fadeOutUp"
  >
    <p v-if="isShow">hello</p>
    <p v-else>你好</p>
  </transition>
</template>

效果