钩子函数半场动画-CSDN博客

本文链接：https://blog.csdn.net/qq_41679133/article/details/107563927

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../2019.8.3/vue.js"></script>
    <style>
        #div1 {
            width: 20px;
            height: 20px;
            background: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="vm">
        <input type="button" value="dianji" @click="flag=!flag"> <!--从无到有才能执行动画-->
        <transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter"
        >
            <div v-if="flag" id="div1"></div>
        </transition>
    </div>
    <script>
        // 可以在属性中声明 JavaScript 钩子
        // <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"      // leaveCancelled 只用于 v-show 中
        // >
        // <!-- ... -->
        // </transition>
        var vm = new Vue({
            el:"#vm",
            data:{
                flag:false,
            },
            methods: {
                beforeEnter(el){
                    // ...
                    el.style.transform = "translate(10px,30px)"
                },
                enter(el,done){
                    el.offsetWidth;
                    el.style.transition = "all .5s ease";
                    el.style.transform = "translate(200px,400px)";
                    
                    done()
                },
                afterEnter(el){
                    this.flag = !this.flag;
                }

            },
        })
    </script>
</body>
</html>