赶快上路吧，不要有一天我们在对方的葬礼上说，要是当时去了就好了。
今天学习了vue过渡和animate.css结合使用，所以，添加一点小笔记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<script type="text/javascript" src="vue.js"></script>
<link rel="stylesheet" type="text/css" rel="nofollow noopener noreferrer" href="animate.css" rel="external nofollow" >
<style type="text/css">
p {
width: 300px;
height: 300px;
background: red;
margin: 10px auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
var app = new Vue({
el:'#box',
data:{
show:false
}
})
}
</script>
</head>
<body>
<div id="box">
<!-- 控制数据的值切换显示隐藏 -->
<button @click="show=!show">transition</button>
<!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated"></p>
</transition> -->
<!-- 第二种方法 -->
<!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition> -->
<!-- 多元素运动 -->
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated" :key="1"></p>
<p v-show="show" class="animated" :key="2"></p>
</transition-group>
</div>
</body>
</html>
到此这篇关于vue过渡和animate.css结合如何使用详解就介绍到这了。自信，是走向成功的伴侣，是战胜困难的利剑，是达向理想彼岸的舟楫。有了它，就迈出了成功的第一步；有了它，就走上了义无反顾的追求路。更多相关vue过渡和animate.css结合如何使用详解内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
