js hook function to achieve a simple animation

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        #ball {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: pink;
        }
    </style>
</head>
<!-- 
    vue animation js hook function is equivalent to the life cycle of the animation function 
        . before-enter: trigger before entering 
        . after-enter: After entering the trigger 
        . enter-cancelled: the end of the entry phase 
        . before-leave: trigger before entering 
        . after-leave: After entering the trigger 
        . leave-cancelled: the end of the entry phase 
 -> 
 <! - This example just entered the stage of animation -> 
< body > 
    < div the above mentioned id = "App" > 
        < the INPUT of the type = "the Button" value = "Point Me" @click = "In Flag =! In Flag" > 
        < Transition @ Enter-before = "beforeEnter" @enter = "Enter">
            <div id="ball" v-show="flag"></div>
        </transition>
    </div>

</body>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {//初始小球不显示
            flag: false
        },
        methods: {
            //i.e., operation element object el 
            beforeEnter (el) { 
                el.style.transform = ' Translate (0,0) ' ; // initial position of the ball 
            }, 
            Enter (el) { 
                // must be added the following line, otherwise not occur the desired effect 
                el.offsetWidth; // here can be understood as force the browser to refresh, you can also write el.offsetHeight 
                el.style.transition = ' All 1.5s EASE ' ; 
                el.style.transform = ' Translate (150px, 250px ) ' ; 
            }, 
            afterEnter (EL) { 
                the console.log ( ' OK' );
                 The this .flag = to false ; // hides pellets 
            } 
        } 
    }); 
</ Script > 

</ HTML >
js hook function to achieve a simple animation

Guess you like
