Vue ＜transition＞过渡动画中使用 animate.css

在<transition>过渡动画中使用，外部css插件 animate.css
可以让动画效果更丰富，使用起来更方便

<!-- Vue <transition>过渡动画中使用 animate.css-->
<!--
在<transition>过渡动画中使用，外部css插件 animate.css
可以让动画效果更丰富，使用起来更方便
-->
<template>
  <div class="page">
    <button @click="show = !show">Toggle show</button>
    <transition
      name="custom-classes-transition"
      enter-active-class="animate__animated animate__shakeY animate__slower"
      leave-active-class="animate__animated animate__flash animate__delay-2s"
    >
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        show: false
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>

在main.js中全局引入css

//在main.js中全局引入css
import '@/assets/css/animate.min.css'

---

第三方 CSS 动画库，Animate.css

animate.css官方网站及使用文档

Animate.css | A cross-browser library of CSS animations.