加入购物车小球动画

最新推荐文章于 2023-11-16 17:00:26 发布

one_潇洒走一回

最新推荐文章于 2023-11-16 17:00:26 发布

阅读量284

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_42982576/article/details/84557700

本文详细介绍了一种使用Vue.js的过渡属性实现购物车小球动画的方法，通过`beforeEnter`、`enter`和`afterEnter`钩子函数，结合`getBoundingClientRect()`获取DOM元素在视图中的位置，实现商品图标从小球状态平滑过渡到购物车的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现加入购物车的小球动画

beforeEnter(el){

            el.style.transform = 'translate(0,0)'
        },
        enter(el,done){
            // console.log('enter')
             el.offsetWidth
             const ballPosition = this.$refs.aball.getBoundingClientRect()
             
****getBoundingClientRect()是js原生的方法,用于获取dom在视图中的位置****
             const appBallPosition = document.getElementById('appBall').getBoundingClientRect()
            

            let xDist = appBallPosition.left -  ballPosition.left
            let yDist = appBallPosition.top -  ballPosition.top

            console.log(xDist,yDist)
             el.style.transform= `translate(${xDist}px,${yDist}px)`
             el.style.transition = 'all 0.5s cubic-bezier(.4,-0.3,1,.68)'

            //  done()
            // el.addEventListener('webkitTransitionEnd', () => {
                done();
            // })
        },
        afterEnter(el){
            this.flag = !this.flag
            // console.log('afterEnter')
        }