vue动画构子函数_html-js-css

概述<!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: 15p

<!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  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>

总结

以上是内存溢出为你收集整理的vue动画构子函数全部内容，希望文章能够帮你解决vue动画构子函数所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1034867.html