<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.test {
width: 100px;
height: 100px;
background-color: palegoldenrod;
position: absolute;
left: 0;
}
.v-enter,
.v-leave-to {
opacity: 0;
left: 300px;
}
.v-leave-to,
.v-leave {
opacity: 1;
left: 0;
}
.v-enter-active,
.v-leave-active {
transition: all 4s;
}
</style>
<body>
<div id="app">
<button @click="isShow=!isShow">按钮</button>
<transition>
<div class="test" v-if="isShow">issss</div>
</transition>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isShow: true
},
methods: {
}
})
</script>
</body>
</html>
