VUE3之Animation（二）

animate.css

安装：

npm install animate.css -save

在文件中添加引用：

import "animate.css";

第一种使用方法和普通的animation用法差不多，需要使用动画的元素要被<transition>包裹，并在style中通过动画的名字使用animate.css的样式：

<template>
  <div class="app">
      <div>
        <button @click="isShow=!isShow">显示/隐藏</button>
      </div>
      <transition name="sk" mode="out-in" :appear="true">
        <h2 class="title" v-if="isShow">hello world</h2>
      </transition>
  </div>
</template>

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

<style scoped>

  .title{
    display: inline-block;
  }

  .sk-enter-active{
    animation: rollIn 1s ease-in
  }
  
  .sk-leave-active{
    animation: rollOut 1s ease-in
  }
</style>

第二种用法是直接在transition标签中加入enter-active-class和leave-active-class属性，属性值为”animate__animated “+动画名称：

      <transition enter-active-class="animate__animated animate__rotateIn" 
        leave-active-class="animate__animated animate__rotateOutDownLeft">
        <h2 class="title" v-if="isShow">hello world</h2>
      </transition>

此外还有一些属性例如enter-to-class、enter-from-class、leave-to-class、leave-from-class