前言
每次在网上买快递或点外卖的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画所示：
实现效果
饿了吗，购物车抛物线动画
具体思路
1. 给添加按钮绑定点击事件 2. 获取点击事件到顶部和左部的距离 3. 并获取需要添加地方标签的位置 4. 新建一个 div 标签 5. 给 div 标签设置样式，并添加动画效果 6. 把 div 标签追加至 body 中 7. 添加动画结束时属性 8. 动画结束时删除
具体实现代码
通过 getBoundingClientRect() 可以获取到标签的位置和宽高
// 获取点击添加事件（x，y）轴位置（使用 ref 获取标签） let x = this.$refs.btnj[index].getBoundingClientRect().x; let y = this.$refs.btnj[index].getBoundingClientRect().y; // 获取动画结束时的位置（使用 ref 获取标签） let z = this.$refs.commodity.getBoundingClientRect().height + this.$refs.commodity.getBoundingClientRect().top; // 新建一个 div 标签 let bar = document.createElement("div"); // 给新建标签添加 style 样式 bar.style.position = "absolute"; // 位置 bar.style.left = x + "px"; bar.style.top = y + "px"; // 宽高 bar.style.width = "0.5rem"; bar.style.height = "0.5rem"; // 圆角 bar.style.borderRadius = "50%"; // 背景色 bar.style.backgroundColor = "#00A0DC"; // 动画执行效果 bar.style.transition = "left .5s linear, top .5s cubic-bezier(0.5, -0.5, 1, 1)"; // 追加至 body 中 document.body.appendChild(bar); // 添加动画属性; setTimeout(() => { // 结束时位置 bar.style.left = 35 + "px"; bar.style.top = z + 20 + "px"; }, 0); // 动画执行完成后删除 bar.ontransitionend = function () { this.remove(); };
以上就是 购物车添加抛物线效果 的实现代码和具体思路，不懂得也可以在评论区里问我，以后会持续添加一些新的功能，敬请关注。
