首页 > 其他分享> > vue动画构子函数

vue动画构子函数

2019-09-14 21:50:22 作者：互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <style>
       .ball{
           width: 15px;
           height: 15px;
           border-radius: 50%;
           background-color: red;
       }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="加入购物车" @click="flag=!flag">
        <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
        <!--<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>-->
    </div>
    <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(150px,450px)"
                    el.style.transition="all 1s ease"
                    done()//是afterEnter函数的引用
                },
                afterEnter(el){
                    this.flag=!this.flag
                    console.log("ok")
                }
            }
        })
    </script>
</body>
</html>

标签：动画,style,vue,el,afterEnter,leave,子函数,enter
来源： https://www.cnblogs.com/cycczh/p/11520418.html