Be careful:
1. A (0, 0) is set at the starting position, which has no effect on the first execution. After an entrance animation is executed, it stops at the final position and is not at the starting position. Through the setting of the position here, the position at the end of the entrance animation can be adjusted here
2. Understand the el reference object of the enter() function and the callback function of the done() function
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<style>
.ball{
margin: 50px 50px;
width: 15px;
height: 15px;
border-radius: 50px;
background-color: brown;
}
</style>
<body>
<div id="app">
<input type="button" value="Jump into the basket" v-on:click="show=!show">
<transition
v-on:before-enter="bEnter"
v-on:enter="enter"
v-on:after-enter="aEnter">
<div class="ball" v-show="show"></div>
</transition>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false
},
methods:{
bEnter(el){
el.style.transform = "translate(0,0)"
//Before the animation enters, the coordinate indicates that the position is fixed at the starting position
//After an entrance animation is executed, it stops at the final position and is not at the starting position. Through the setting of the position here, the position at the end of the entrance animation can be adjusted here
},
enter(el,done){
el.offsetTop;
//It is necessary to write one of the four types of offsetTop and offsetWeith to force the animation to refresh
el.style.transform = "translate(200px,450px)";
el.style.transition = "all 2s ease";
done()
//done is the native reference function name of the enter method, which means the callback function, that is, the next operation aEnter(), to eliminate the delay effect.
},
aEnter(el){
this.show = !this.show;
}
}
//The el here represents that the object to execute the half court animation is the first native parameter, which has the same el function as the custom instruction
});
</script>
</body>
</html>Effect:
