<!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">
width: 500px;
height: 500px;
background-color: grey;
position: relative;
}
p {
position: absolute;
z-index: 1;
width: 300px;
height:300px;
background: red;
color:black;
left: 0;
bottom: 0;
}
/* 定义动画 */
.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:300px;
height:0px;
}
/* 重要：定义初始状态 */
.fade-enter{
opacity:0;
width:300px;
height:0px;
}
</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">
<button @click="show=false">关闭</button>
</p>
</transition>
</div>
</body>
</html>
