vue中的半程动画

Posted 2021-03-23 progress-

vue中使用css和第三方库完成的动画都是全程动画（又开始，有结束），当有些需求只需要又开始的动画，不需要有结束的动画时（加入购物车时，有一个小球慧聪商品按钮区域，运动到购物车图标上，并不会返回回去），他们两个不会满足需求

此时vue为我们提供了

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"

</transition>

共提供了8个钩子函数，将这些函数定义到methods中，我们写加入购物车小球动画时，只需要前三个钩子函数即可

// 注意：动画钩子函数的第一个参数：el 表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象

                // 可以认为，el是通过document.getElementById(‘‘)方式获取到的原生JS DOM对象

                // 动画入场之前，动画还未开始，可以在这里设置元素的其实位置

                beforeEnter(el){

                   

                    el.style.transform="translate(0,0)"

                },

                // 动画开始之后的样式，可以在这里设置元素完成动画之后的，结束状态

                enter(el,done){

                    // el.offsetWidth没有实际的作用，但是，如果不写，出不来动画效果，可以认为他表示强制动画刷新

                    el.offsetWidth

                    el.style.transform="translate(150px,450px)"

                    el.style.transition="all 1s ease"

                    done()

                },

                // 动画页面前

                afterEnter(el){

                    // el.style.opacity= 0

                    this.flage=!this.flage

                }

 

小球的样式自己写，这是个模仿加入购物车的小动画，可根据自己的实际需求进行更改