vue transition标签使用Animate.css动画库
安装 使用 npm 安装
npm install animate.css --save
使用yarn安装
yarn add animate.css
main.js导入
import "animate.css"
页面
<template>
<div id="app">
<button @click="show = !show">隐藏/显示</button>
<transition
name="custom-classes-transition"
enter-active-class="animate__animated animate__bounce"
leave-active-class="animate__animated animate__zoomOut"
>
<p v-if="show">hello word,I love China</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
}
},
}
</script>
<style scoped>
</style>
|