###下包
npm install animate.css --save
<template>
<div id="app">
<button @click="toggle">点击</button>
<transition
enter-active-class="animate__animated animate__fadeInLeft"
leave-active-class="animate__animated animate__fadeOutLeft"
>
<p v-if="show">我是盒子</p>
</transition>
</div>
</template>
<script>
// Import Animate.css
import 'animate.css';
export default {
data() {
return {
show: true
};
},
methods: {
toggle() {
this.show = !this.show;
}
}
};
</script>
<style>
/* 自定义样式 */
#app {
text-align: center;
margin-top: 50px;
}
button {
margin-bottom: 20px;
padding: 10px 20px;
font-size: 16px;
}
p {
font-size: 24px;
color: #333;
}
</style>