vue钩子函数模拟半场动画_半场动画的钩子函数before-enter enter 的el相同?-CSDN博客

本文链接：https://blog.csdn.net/wmiaopas/article/details/99683054

2019年8月16日
钩子函数主要就是这三个函数

      	/* 注意：动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素， 是个原生的JS DOM对象 */
        /*相当于document.getElememtById('')获取的*/
        /*beforeEnete表示动画入场之前，此时，动画尚未开始，可以再beforeEnter中，设置元素开始动画之前的起始样式*/
		beforeEnter(el){
                   el.style.transform="translate(0,0)" /*设置小球的起始位置*/
						},
               /*enter表示动画开始之后的样式，这里可以设置小球完成后的结束状态*/
		enter(el,done){
                el.offsetWidth /*可以认为强制动画刷新*/
                el.style.transform="translate(150px,450px)"
                el.style.transition='all 0.4s ease'
                done()  /*这里的done，起始就是afterEnter这个函数，也就是说：done是afterEnter函数的引用*/
               		},
        afterEnter(el){
                   this.flag=false
               } /*动画完成之后的事件*/

正因为在afterEnter里边设置了flag=false所以小球才不会悬停在结束的位置

钩子函数模拟小球半场动画的代码

<!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="js/vue.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
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
                    <div class="ball" v-show="flag">
            </transition>
        </div>
    </div>
    <script>
        
        var vm=new Vue({
           el:'#app',
           data:{
               flag:false
           },
           methods:{
               /* 注意：动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素， 是个原生的JS DOM对象 */
               /*相当于document.getElememtById('')获取的*/
               /*beforeEnete表示动画入场之前，此时，动画尚未开始，可以再beforeEnter中，设置元素开始动画之前的起始样式*/
               beforeEnter(el){
                   el.style.transform="translate(0,0)" /*设置小球的起始位置*/
               },
               /*enter表示动画开始之后的样式，这里可以设置小球完成后的结束状态*/
               enter(el,done){
                el.offsetWidth /*可以认为强制动画刷新*/
                el.style.transform="translate(150px,450px)"
                el.style.transition='all 0.4s ease'

                done()  /*这里的done，起始就是afterEnter这个函数，也就是说：done是afterEnter函数的引用*/
               },
               afterEnter(el){
                   this.flag=false
               } /*动画完成之后的事件*/
           }
        });
    </script>
</body>

</html>