一、第一步引入vue和animate.css文件?
<script src="./vue-2.4.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
二、使用步骤
1.引入库
代码如下(示例):
#app {
width: 500px;
margin: auto;
}
2.读入数据
代码如下(示例):
<div id='app'>
<button @click="show = !show">
Toggle render
</button>
<!-- 版本4的css 需要在类名里加animate__ -->
<transition name="custom-classes-transition" enter-active-class="animate__animated animate__bounceOutUp"
leave-active-class="animate__animated animate__bounceOutUp">
<p v-if="show">hello</p>
</transition>
</div>
2.读入数据
代码如下(示例):
const vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
}
})