<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
img{
width:300px;
height:300px;
}
/*整个 淡入 和淡出的过程是 1秒钟 缓慢进行 */
.fade-enter-active,.fade-leave-active{
transition: 3s all ease;
}
.fade-enter-to{
opacity: 1;
width:300px;
height:300px;
}
.fade-leave{
opacity: 1;
width:300px;
height:300px;
}
.fade-leave-to{
opacity: 0;
width:100px;
height:100px;
}
/* 淡入开始的时候 */
.fade-enter{
opacity: 0;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="app">
<button type="button" @click="show=!show">点击缩小放大显示</button>
<transition name="fade">
<!-- 在图片消失或者是出现的时候-->
<img src="img/1234.jpg" v-show="show">
</transition>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:false
},
methods:{
}
})
</script>
</body>
</html>
vue之过渡
最新推荐文章于 2023-03-31 19:08:05 发布