<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transtion结合css实现过渡动画</title>
<style type="text/css">
.button{
width: 200px;
height: 40px;
line-height: 40px;
background-color: #ffdab9;
text-align: center;
}
p{
width: 200px;
margin: 0;
background-color: #fffacd;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to{
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="button" v-on:click="show = !show">切换</div>
<transtion name="fade">
<p v-if="show">
学习课堂是一款专业学习IT开发知识的技能平台。
</p>
</transtion>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
show:true,
}
})
</script>
</body>
</html>
vue-例7-1transtion结合css实现过渡动画.html
最新推荐文章于 2024-10-11 17:39:47 发布