直接上代码
<!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" href="animate.css">
<style type="text/css">
p {
width: 300px;
height: 300px;
background: red;
}
/* 定义动画 */
.fade-enter-active,.fade-leave-active {
transition: all 1s ease;
} /*
* 定义过渡
*/ /* .fade-enter,.fade-leave-active {
opacity: 0
} */ /*
* 定义宽高动画
*/
.fade-enter-active{
opacity:1;
width:300px;
height:300px;
}
.fade-leave-active{
opacity:0;
width:100px;
height:100px;
}
/* 重要：定义初始状态 */
.fade-enter{
opacity:0;
width:100px;
height:100px;
}
</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 name="fade">
<p v-show="show"></p>
</transition>
</div>
</body>
</html>