<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background: tomato;
margin-top: 20px;
opacity: 1;
margin-left: 0;
}
.box-enter-active, .box-leave-active {
transition: all .8s;
}
.box-enter {
opacity: 0;
margin-left: 200px;
}
.box-leave-active {
opacity: 0;
margin-left: 200px;
}
</style>
</head>
<body>
<div id="app" class="app">
<button class="btn" @click="showBox=!showBox">click</button>
<transition name="box"> //name是动画的标志,
<div class="box" v-show="showBox"></div>
</transition>
</div>
</body>
</html>
<script>
const vm = new Vue({
el: '#app',
data: {
showBox: false
}
})
</script>
vue transtion
最新推荐文章于 2022-07-12 19:44:47 发布