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 theanimate__
prefix we also provide theanimate.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/