请陛下批阅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>半场动画</title>
<script src="../../vue/vue-v2.6.11.js"></script>
<style>
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<button @click="flag = !flag">快到碗里来</button>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="alterEnter">
<div class="ball" v-if="flag"></div>
</transition>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {
beforeEnter (el) {
el.style.transform = 'translate(0, 0)'
},
enter (el, done){
el.offsetWidth
el.style.transform = "translate(100px, 450px)";
el.style.transition = "all 1s ease";
done();
},
alterEnter (el){
this.flag = !this.flag;
}
}
});
</script>
</html>
