传统做法:
在main.js中引入,使用vue.use( ) 但是打包后会报错。因此只需要引入即可
第一步:安装
npm install animate.css
第二步:引入
在main.js中
import 'animate.css';
第三步:使用
注意,在使用时候,不要加animate__前缀了!!!!
<template>
<div>
<button @click="changeShow">切换动画效果</button>
<transition
enter-active-class="animate__animated animate__flash"
leave-active-class="animate__animated animate__jello"
>
<div v-show="show">变小直到隐藏</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
changeShow() {
this.show = !this.show
}
}
}
</script>