Vue中使用animate.css V4

最近把公司官网项目依赖进行了升级，里面用到了animate.css。目前版本4.1.0。

目前4.x版本相比之前3.x的breaking change如下：

Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change: we have added prefix for all of the Animate.css classes - defaulting to animate__ - so a direct migration is not possible.

But fear not! Although the default build, animate.min.css, brings the animate__ prefix we also provide the animate.compat.css file which brings no prefix at all, like the previous versions (3.x and under).

现总结下animate.css V4版本在Vue中的使用方法。

安装

yarn add animate.css

引入

在main.js中引入

import animate from 'animate.css'

Vue.use(animate)

使用

在App.vue中

<template>
  <div id="app">
    <button @click="toggleVisible">transition</button>
    <!--方法一-->
    <transition
      enter-active-class="animate__fadeIn"
      leave-active-class="animate__fadeOut"
    >
      <h1 v-show="visible" class="animate__animated">Animate.css</h1>
    </transition>
    <!--方法二-->
    <transition
      enter-active-class="animate__animated animate__fadeInLeft"
      leave-active-class="animate__animated animate__fadeOutLeft"
    >
      <h1 v-show="visible">Animate.css</h1>
    </transition>
    <!--方法三-->
    <transition-group
      enter-active-class="animate__fadeInRight"
      leave-active-class="animate__fadeOutRight"
    >
      <h1 v-show="visible" class="animate__animated" :key="1">Animate.css</h1>
      <h2 v-show="visible" class="animate__animated" :key="2">Just-add-water CSS animations</h2>
    </transition-group>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      visible: false
    }
  },
  methods: {
    toggleVisible () {
      this.visible = !this.visible
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

补充

更多高级用法请参考官方文档：https://animate.style/