vue实现加入购物车动效

实现

实现逻辑:

  1. 点击添加购物车按钮时,获取当前点击位置eventclientX clientY
  2. 动态创建移动的小球,动态计算小球需要移动到的位置(通过refgetBoundingClientRect获取统计元素按钮位置);
  3. 计算小球最后的移动位置,并在移动到后移除元素
  4. 小球动画移动结束后,添加统计数字。

统计按钮

 <el-button ref="lableBtnRef" @click="handleChangeStep('0')" :class="currentStep == '0' ? 'linear-btn' : ''" class="normal-btn " size="mini"><i class="index-circle">1</i>标签选择<el-badge :value="cartShopList.length" class="item"><i class="lg-icon white-cart"></i></el-badge></el-button>

点击加入购物车按钮:

  //点击加入购物车事件async hadnleSelect(event, item) {const x = event.clientX - 20;const y = event.clientY - 20;await this.createBall(x, y)//等动画执行完再添加个数this.cartShopList.push(item)},//动态创建加入购物车的元素,和动画createBall(left, top) {return new Promise(reslove => {const bar = document.createElement("ball");let lableBtn = this.$refs.lableBtnRef.$ellet rect = lableBtn.getBoundingClientRect() //获取统计按钮位置let size = [lableBtn.clientWidth, lableBtn.clientHeight] //统计按钮本身高、宽const afterX = rect.x + size[0] / 2 //计算小球最后的位置xconst afterY = rect.y - (size[1] / 2)//计算小球最后的位置Ybar.classList = ['cartBall']bar.style.position = "fixed";bar.style.left = left + "px";bar.style.top = top + "px";bar.style.zIndex = '9999'bar.style.transition ="left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1)";document.body.appendChild(bar);setTimeout(() => {const x = afterX;const y = afterY;bar.style.top = y + "px";bar.style.left = x + "px";}, 0);bar.ontransitionend = function () {this.remove();reslove()};})}//创建的小球的样式
<style>
.cartBall {width: 20px;height: 20px;border-radius: 50%;z-index: 99;background: url(~@/assets/img/labelManage/sopCart.svg) center /100% no-repeat;
}
</style>

效果图:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/17965.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

985上交应届生转正12天,被某东辞退了!

&#x1f447;我的小册 45章教程:(小白零基础用Python量化股票分析小册) ,原价299&#xff0c;限时特价2杯咖啡&#xff0c;满100人涨10元。 01.事情起源 最近粉丝群都在转发一个截图&#xff0c;某应届毕业生在某东实习一年&#xff0c;才转正才12天&#xff0c;就因为自己调侃…

如何在Spring Boot中整合PageHelper实现分页功能

1.前言 在开发web应用程序时&#xff0c;经常会遇到需要对数据库中的数据进行分页查询的情况。为了简化分页查询的实现过程&#xff0c;我们可以利用PageHelper这个优秀的分页插件来实现分页功能。本文将介绍如何在Spring Boot项目中整合PageHelper&#xff0c;并演示如何使用它…

生成验证码的奥秘:从列表到字符串的魔法转换

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;验证码生成的背景与需求 二、生成验证码的方法一&#xff1a;列表生成…

2024年zoom会议受主持人账户限制影响,无法加入会议。(错误代码13215)

问题一、老师&#xff0c;你好!我的zoom账户&#xff0c;刚开始注册后可以登录&#xff0c;但是现在登录不了了。代码1044。其次&#xff0c;我如果通过网页版设置会议号&#xff0c;别人也加入不了。代码13215。 这两个问题一般会同时出现。登录失败。(错误代码:1044)一般是创…

Python代码:十八、生成数字列表

1、描述 牛牛在牛客网系统录入了一连串数字&#xff0c;数字之间依靠逗号隔开&#xff0c;你能帮助他将这些数字存储在列表中吗&#xff0c;列表元素以int的形式。 输入描述&#xff1a; 输入一行整数&#xff0c;数字之间以空格间隔。 输出描述&#xff1a; 输出这些数字…

超级初始网络

目录 一、网络发展史 1、独立模式 2、局域网 LAN&#xff08;Local Area Network&#xff09; 3、广域网 WAN (Wide Area Network) 二、网络通信基础 1、IP地址&#xff1a;用于定位主机的网络地址 2、端口号&#xff1a;用于定位主机中的进程 3、网络协议 4、五元组 …

Android 13 高通设备热点低功耗模式

需求: Android设备开启热点,使Iphone设备连接,自动开启低数据模式 低数据模式: 低数据模式是一种在移动网络或Wi-Fi环境下,通过限制应用程序的数据使用、降低数据传输速率或禁用某些后台操作来减少数据流量消耗的优化模式。 这种模式主要用于节省数据流量费用,特别是…

第二证券炒股知识:股票破发后怎么办?

当一只新股的价格跌破其发行价时&#xff0c;往往会受到商场出资者的关注。关于股票破发后怎么办&#xff0c;第二证券下面就为我们具体介绍一下。 股票破发是指股票的商场价格低于其发行价格或最近一次增发价格&#xff0c;股票破发往往是由于多种要素共同作用的结果&#xf…

5G工业数采网关的功能及工业应用-天拓四方

随着5G技术的不断发展&#xff0c;其在工业领域的应用日益广泛。5G工业数采网关作为连接工业设备与网络的重要枢纽&#xff0c;具备多种功能&#xff0c;为工业自动化、智能制造和智慧工厂提供了强大的支持。本文将详细解析5G工业数采网关的功能&#xff0c;并探讨其在工业领域…

java实现 将List<User> 里面很多数据的几个字段提取出来快速写到txt 文件里面

目录 1 问题2 实现 1 问题 List 这个里面有很多的数据&#xff0c;现在要把他里面的a&#xff0c;B&#xff0c;C&#xff0c;D这4个字段提取出来&#xff0c;并且把数据都写到txt 文件里面&#xff0c;每一个数据一行&#xff0c;各个数值用逗号隔开 2 实现 在 BufferedWri…

Docker Compose快速入门

本教程旨在通过指导您开发基本Python web应用程序来介绍Docker Compose的基本概念。 使用Flask框架&#xff0c;该应用程序在Redis中提供了一个命中计数器&#xff0c;提供了如何在web开发场景中应用Docker Compose的实际示例。 即使您不熟悉Python&#xff0c;这里演示的概念也…

双击移动硬盘打不开?原因分析与数据恢复全攻略

在日常生活和工作中&#xff0c;移动硬盘作为数据存储和传输的重要工具&#xff0c;扮演着至关重要的角色。然而&#xff0c;当我们遇到双击移动硬盘无法打开的情况时&#xff0c;往往会感到十分困扰。本文将详细探讨双击移动硬盘打不开的原因&#xff0c;并提供两种有效的数据…

go webview/wails学习记录

文章目录 webview安装基础代码错误情况wails安装初始化一个项目错误信息使用arco-design(在初始化项目上修改代码)修改窗口图标多页面展示添加自定义图标-iconfont制作伸缩侧边栏侧边栏菜单在form中使用select且select联动选择使用go读取本地excel文件在转json_str使用go将json…

骨折检测数据集VOC+YOLO格式717张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;717 标注数量(xml文件个数)&#xff1a;717 标注数量(txt文件个数)&#xff1a;717 标注类别…

Qt线程与并发中创建线程的四种方法

在Qt中实现线程与并发&#xff0c;主要有四种创建线程的方法&#xff1a; 1.继承QThread类并重写run方法&#xff0c; 2.QtConcurrent::run&#xff0c; 3.QThreadPool和QRunnable 4.继承QObject&#xff0c;moveToThread &#xff08;最常用&#xff09; 。下面我会详细解…

GANs生成对抗网络的学习

1.GANs生成网络的定义 GANs是一种深度学习模型&#xff0c;用于生成新的数据实例&#xff0c;如图像、音频和文本。它主要由两部分组成&#xff1a;生成器&#xff08;Generator&#xff09;和判别器&#xff08;Discriminator&#xff09;。 2.生成器 生成器的目标是创造出…

PC网游、页游、手游、端游各类游戏收集整理大集合-90%以上游戏带视频架设教程

本游戏资源提供给大家学习及参考研究借鉴美工之用&#xff0c;请勿用于商业和非法用途&#xff0c;无任何技术支持&#xff01; 干货列表

qmt量化交易策略小白学习笔记第3期【qmt如何获取某只股票ST的历史】

#获取某只股票ST的历史 #内置python 提示 本函数需要下载历史ST数据(过期合约K线),可通过界面端数据管理 - 过期合约数据下载 该数据是VIP权限数据在新窗口打开 原型 内置python ContextInfo.get_his_st_data(stockcode) 释义 获取某只股票ST的历史 参数 字段名 数据…

VMware中的虚拟机设置开启VT虚拟化

虚拟机系统关机打开虚拟机设置-----点击处理器----勾选虚拟化引擎---确定即可

C#面:解释什么是GAC?它解决了什么问题?

GAC 是 Global Assembly Cache&#xff08;全局程序集缓存&#xff09;的缩写&#xff0c;它是 C# 中用于管理和存储共享程序集的特殊文件夹。GAC 解决了以下两个问题&#xff1a; 版本控制&#xff1a;在开发和部署过程中&#xff0c;可能会存在多个程序集版本的情况。GAC通过…