[JavaScript知识库]Vue中使用animate.css V4做动画

1. 引入：

• boot CND引入 链接
• 全局引入:
  $ yarn add animate.css
  $ import ‘animate.css’;
  $ Vue.use(animate)
• 更多动画名访问Animate官网

2. 使用方法

<template>
  <div id="example">
    <button @click="show = !show">Toggle render</button>
    //引入方法之一
    <transition  
    enter-active-class="animate__fadeInDown" 
    leave-active-class="animate__heartBeat">
    <div class="animate__animated" v-if="show">hello</div>   //注意class="animate__animated"必须加否则无效
    </transition>
    //引入方法之二
    <transition  
    enter-active-class="animate__animated animate__fadeInDown" 
    leave-active-class="animate__animated animate__heartBeat">
    <div v-if="show">hello</div>
    </transition>
    //引入方法之三
    <transition-group
      enter-active-class="animate__tada"
      leave-active-class="animate__flash">
      <h1 v-if="show" class="animate__animated" :key="1">hello</h1>
      <h2 v-if="show" class="animate__animated" :key="2">word</h2>
    </transition-group>
  </div>
</template>

<script>
import 'animate.css';
export default {
  name: "Animate.vue",
  data() {
    return {
      show: true
    }
  }
}
</script>

<style scoped>
#example {
  margin-left: 200px;
  margin-top: 50px;
}
</style>