Vue3封装小球加入购物车事件

最新推荐文章于 2024-03-07 16:20:55 发布

原创

最新推荐文章于 2024-03-07 16:20:55 发布 · 1.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue3中封装一个动态小球动画，通过JavaScript创建并移动元素，利用requestAnimationFrame优化性能，并在事件触发时移除球体。展示了在购物车添加动画效果的代码实现。

封装小球动画

将下面代码封装到 js文件中：

let createBall = (left, top, box) => {//

const ball = document.createElement('div');

ball.style.position = 'absolute';

ball.style.left = left - 2 + 'px';

ball.style.top = top - 5 + 'px';

ball.style.width = '20px';

ball.style.height = '20px';

ball.style.borderRadius = '20%';

ball.style.backgroundColor = 'green';

ball.style.transition = 'left .6s linear, top .6s cubic-bezier(0.5,-0.5,1,1)';

document.body.appendChild(ball);

//使用 requestAnimationFrame() 方法，这样可以避免一些性能问题

requestAnimationFrame(() => {

获取 box 元素的左边距和顶部距离