Vue加入购物车动效

在项目中，很多都有购物车模块，需要添加购物车动效。
部分vue代码

        <!-- 运动的小球 -->
        <div id="points">
            <div class="pointOuter pointPre">
                <div class="point-inner"></div>
            </div>
            <div class="pointOuter pointPre">
                <div class="point-inner"></div>
            </div>
            <div class="pointOuter pointPre">
                <div class="point-inner"></div>
            </div>
            <div class="pointOuter pointPre">
                <div class="point-inner"></div>
            </div>
            <div class="pointOuter pointPre">
                <div class="point-inner"></div>
            </div>
            <div class="pointOuter pointPre">
                <div class="point-inner"></div>
            </div>
            <div class="pointOuter pointPre">
                <div class="point-inner"></div>
            </div>
        </div>
                    <!-- add按钮 -->
                    <div class="add-btn" v-if="item.stock!=0">
                        <div :class="{pop: true, mov: item.selStock>0}">
                            <img
                                @click="reduce(item)"
                                src="@/assets/images/skin2/delshop.png"
                                class="reduceNm"
                            />
                            <input
                                style="color:#000;background:#fff;"
                                type="number"
                                :value="item.selStock"
                                disabled
                            />
                        </div>
                        <img
                            @click="add(item,$event)"
                            src="@/assets/images/skin2/addshop.png"
                            class="addNum"
                        />
                    </div>

部分js代码

add(obj, e) {
            let listArr = this.goodList;
            let arr = [];
            listArr.forEach(item => {
                if (item.goods_id == obj.goods_id) {
                    if (item.selStock + 1 <= item.stock) {
                        // this.img=obj.img
                        // 小球动画
                        var top = e.clientY, // 小球降落起点
                            left = e.clientX,
                            endTop = window.innerHeight - 50, // 小球降落终点
                            endLeft = 50;
                        // 小球到达起点
                        var outer = $("#points .pointPre")
                            .first()
                            .removeClass("pointPre")
                            .css({
                                left: left + "px",
                                top: top + "px"
                            });
                        var inner = outer.find(".point-inner");

                        setTimeout(function() {
                            // 将jquery对象转换为DOM对象
                            outer[0].style.webkitTransform =
                                "translate3d(0," + (endTop - top) + "px,0)";
                            inner[0].style.webkitTransform =
                                "translate3d(" + (endLeft - left) + "px,0,0)";

                            // 小球运动完毕恢复到原点
                            setTimeout(function() {
                                outer.removeAttr("style").addClass("pointPre");
                                inner.removeAttr("style");
                            }, 1000); //这里的延迟值和小球的运动时间相关
                        }, 1);

                        item.selStock = item.selStock + 1;
                    }
                    arr.push(item);
                } else {
                    arr.push(item);
                }
            });
            this.goodList = arr;
            this.getTotal();
        }

部分css代码

      .add-btn {
            color: #000;
            font-size: 1.2rem;
            width: 6rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img,
            input {
                display: inline-block;
                text-align: center;
                width: 1.8rem;
                height: 1.8rem;
                color: red;
                box-sizing: border-box;
            }
            input {
                border: none;
            }
        }
        /* 运动小球 */
.pointPre {
    /* 动画的小球 */
    display: none;
}
.pointOuter {
    position: absolute;
    z-index: 114;
    /* 当小球抛出时遵循贝塞尔曲线过渡 */
    -webkit-transition: all 1s cubic-bezier(0.39, -0.4, 0.83, 0.23) 0s;
    transition: all 1s cubic-bezier(0.39, -0.4, 0.83, 0.23) 0s;
}

.point-inner {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #f09d46;
    /* 过渡属性名称 过渡时间 过渡曲线 延迟时间 */
    transition: all 1s ease 0s;
    -webkit-transition: all 0.8s ease 0s;
    img {
        width: 100%;
        height: 100%;
    }
}

/* 点击添加按钮缓慢弹出订单个数以及减少按钮 */
.pop {
    display: inline-block;
    position: relative;
    left: 3rem;
    opacity: 0;
    transition: all ease 0.5s;
}
.pop .reduceNm {
    transform: rotate(0deg);
    transition: all ease 0.5s;
}
.mov {
    left: 0;
    opacity: 1;
}
.pop.mov .reduceNm {
    transform: rotate(-360deg);
}
.addNum {
    position: relative;
    z-index: 10;
}

仅做记录，不喜勿喷~~