Hook function animation

Setting meaning of starting animation (same as ending animation)

• v-on:before-enter indicates that the animation has not yet started before the animation enters, in which you can set the starting style of the element before the animation begins.
• v-on:enter represents the animation, and the style after the start can set the end state of the animation.
• v-on:after-enter indicates the state of the animation after completion
• v-on:enter-cancelled to cancel start animation

<transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:enter-cancelled="enterCancelled"

        v-on:before-leave="beforeLeave"
        v-on:leave="leave"
        v-on:after-leave="afterLeave"
        v-on:leave-cancelled="leaveCancelled"
>
     ...
</transition>

Example:

css

 .ball {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: red;
            margin-top: 20px;
        }

body

<div id="app">
    <input type="button" value="Get into the bowl!" @click="flag=!flag">
    <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
    >
        <div class="ball" v-if="flag"></div>
    </transition>
</div>

<script>
    window.onload = function () {
        let vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                // Note: The first parameter of the animation hook function: el
                // The DOM element to execute the animation is a native JS DOM object
                // It can be considered that el is a native JS DOM object obtained by document.getElementById('')
                beforeEnter(el) {
                    // Represents that before the animation enters, the animation has not yet started, and can be in it.
                    // Set the start style before the element starts animation
                    // Set the starting position of the ball before starting animation
                    el.style.transform = 'translate(0,0)';
                },
                enter(el,done) {
                    //No actual effect, but indispensable, can be understood as forced animation refresh
                    el.offsetWidth;//OffetHeight, offsetLeft, etc.
                    //Represents the animation, the style after the start, you can set the end state of the ball completion animation
                    el.style.transform = 'translate(150px,500px)';
                    el.style.transition = 'all 1s ease';

                    // What we do here is actually the function afterEnter.
                    // That is, do is a reference to the afterEnter function
                    done();
                },
                afterEnter(el) {
                    //Represents the status of the ball after the animation is completed
                    this.flag = !this.flag;
                }
            }
        });
    }
</script>