Vue2 - 使用第三方动画样式，实现过度动画

使用第三方 animate过度动画

GitHub：https://www.npmjs.com/package/animate.css

官网：https://github.com/animate-css/animate.css

第一步 安装样式库

npm install animate.css

第二步 引入样式，并给transition或transition-group标签的name属性配置为animate__animated animate__bounce

name="animate__animated animate__bounce"

第三步 配置Transition标签的属性调用（推荐打开官网试用效果后再配置），实例如下：

Test.vue

<template>
    <div>
      <p>使用第三方动画</p>
     <button @click="isShow=!isShow">test 显示/隐藏</button>
      <transition-group
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__swing"
          leave-active-class="animate__backOutUp"
      >
        <h1 v-show="isShow" key="1">AAA</h1>
        <h1 v-show="isShow" key="2">BBB</h1>
      </transition-group>
    </div>
</template>

<script>
import 'animate.css' //导入第三方动画样式

export default {
  name: "Test",
  data(){
    return {
      isShow:true
    }
  }
}
</script>

<style scoped>
h1{
  background-color: orange;
}

</style>

分析

<transition-group
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__swing"
          leave-active-class="animate__backOutUp"
      >
        <h1 v-show="isShow" key="1">AAA</h1>
        <h1 v-show="isShow" key="2">BBB</h1>
      </transition-group>

使用enter-active-class和leave-active-class应用css动画

enter-active-class设置入场的效果，使用leave-active-class设置离场的效果

自定义类名，可以通过以下特性来自定义过渡类名：
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
自定义类名的优先级高于普通的类名，这对于Vue的过渡系统和其他第三方CSS动画库，如 Animate.css 结合使用十分有用

显性的过渡持续时间（2.2.0 新增）

通常Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。

若想自定义时机的话，可以用组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

<transition :duration="1000">...</transition>

可以定制进入和移出的持续时间：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

---

Vue封装的过度与动画 小结

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。图示：

2. 写法：

1. 准备好样式：

• 元素进入的样式：

1. v-enter：进入的起点

2. v-enter-active：进入过程中

3. v-enter-to：进入的终点

• 元素离开的样式：

4. v-leave：离开的起点

5. v-leave-active：离开过程中

6. v-leave-to：离开的终点

2. 使用<transition>包裹要过度的元素，并配置name属性：

<transition name="hello">
    <h1 v-show="isShow">你好啊！</h1>
</transition>

3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值