购物车运动小球

最新推荐文章于 2023-06-20 20:16:53 发布

&時光

最新推荐文章于 2023-06-20 20:16:53 发布

阅读量245

点赞数 2

分类专栏： vue react javascript 文章标签： vue.js reactjs javascript html css

本文链接：https://blog.youkuaiyun.com/Time_Flies_lei/article/details/116568538

版权

javascript 同时被 3 个专栏收录

38 篇文章

订阅专栏

vue

31 篇文章

订阅专栏

react

20 篇文章

订阅专栏

第一步：定义一个变量

bSys: false, //判断单个小球运动的条件

第二步：在需要的地方添加小球

                    <div className="shop">
                        <div className="cart"></div>
                        <transition
                            name="drop"
                            onBefore-enter="beforeDrop"
                            onEnter="dropping"
                            onAfter-enter="afterDrop"
                        >
                                //小球样式与状态
                            <div className="ball" v-show="bSys == item.ID">
                                <img
                                    className="inner inner-hook"
                                // :src="'http://www.ibugthree.com/' + item.img_src"
                                />
                            </div>
                        </transition>
                    </div>

第三步：添加方法

  beforeDrop(el) {
        /* 购物车小球动画实现 */
        if (this.bSys) {
            setTimeout(function () {
                let rect = el.getBoundingClientRect(); //元素相对于视口的位置

                 //只修改x、y即可
                let x = rect.right + 180;
                let y = document.querySelector(".favorites-wrap").offsetTop - rect.top;
                

                el.style.display = "";

                el.style.webkitTransform = "translateY(" + y + "px)"; //translateY
                let inner = el.getElementsByClassName("inner-hook")[0];
                inner.style.webkitTransform = "translateX(" + x + "px)";
                inner.style.transform = "translateX(" + x + "px)";
            });
        }
    }
    dropping(el) {
        /*重置小球数量  样式重置*/
        console.log("进行中");
        el.style.transform = "translate3d(0,0,0)";
        let inner = el.getElementsByClassName("inner-hook")[0];
        inner.style.transform = "translate3d(0,0,0)";
    }
    afterDrop(el) {
        /*初始化小球*/
        if (this.bSys) {
            el.style.display = "none";
            console.log("结束");
            this.bSys = false;
        }
    }

第四步：添加css样式，定位的值需要自己根据需求稍加改变

 // 动态小球
        .shop {
            position: absolute;
            top: 100px;
            left: 150px;
        }

        .ball {
            position: absolute;
            left: 120px;
            bottom: 0px;
            z-index: 20;
            transition: all 1s cubic-bezier(0.49, -0.29, 0.75, 0.41);
            /*贝塞尔曲线*/
        }

        .inner {
            width: 80px;
            height: 80px;
            border-radius: 100px;
            transition: all 1s linear;
        }

即可实现，谢谢阅读！

喜欢就收藏评论！