VUE环境下 CSS3+JS 实现发牌 翻牌

创建牌容器(关键点:overflow:hidden):

<div class="popup-box"></div>
.popup-box {position: absolute;width: 100vw;height: 100vh;top: 0px;left: 0;overflow: hidden;
}

创建每一张牌《固定十张牌》:

1.父级(卡牌未放开显示背景) 卡牌子级(显示卡牌内容)

<div class="popup-box-card" :class="['popup-box-card-cws' + index, item.show && 'popup-box-card' + index]" v-for="(item, index) in cardList"><div class="popup-top-box-card-son":class="[item.show && 'popup-box-card-son-rotate']"><div class="popup-box-card-son-box"><img :src="item.Url"><div>Name</div><div>Describe</div></div></div>
</div>
.popup-top-box-card {position: absolute;background: url('https://oss-test.newplay7.com/20221213/16709168590023654.png') no-repeat;background-size: 100% 100%;transform: scale(0.51) rotateY(0deg);margin-top: 0;left: 210px;top: calc(100vh - 400px);transition: all 0.2s;}.popup-top-box-card-son {width: 100%;height: 100%;background: url('https://gd-hbimg.huaban.com/7057f0b053d03b1e3034f902ad252edd6c930fbef8d15-GA6eJ7_fw658') no-repeat;background-size: 100% 100%;opacity: 0;transform: rotateY(180deg);
}

初始化牌位置:

  .popup-top-box-card-cws1,.popup-top-box-card-cws4,.popup-top-box-card-cws7 {left: 230px;}.popup-top-box-card-cws2,.popup-top-box-card-cws5,.popup-top-box-card-cws8 {left: 220px;}

 开始发牌:

1.通过变量show来控制 添加 'popup-top-box-card' + index 给牌Class 改变position top left  实现发牌动作  rotateY(180deg) 实现翻牌动作

2.通过变量show来控制卡牌子级 添加 ‘popup-box-card-son-rotate’ opacity 延迟0.05s显示0.2s卡牌内容

JS 发牌方法

const addCardAnimation = (inx: number, arr: CardItemType[]) => {return new Promise(revele => {arr[inx] = { ...arr[inx], show: true}cardList.value = arrsetTimeout(() => {revele(true)}, 400)})
}for (let i = 0; i < cardList.value.length; i++) {await addCardAnimation(i, cardList.value)
}

 

2023-08-29 14-48-44

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

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

相关文章

基于java swing和mysql实现的电影票购票管理系统(源码+数据库+运行指导视频)

一、项目简介 本项目是一套基于java swing和mysql实现的电影票购票管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都…

PHP小白搭建Kafka环境以及初步使用rdkafka

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、安装java&#xff08;Kafka必须安装java&#xff0c;因为kafka依赖java核心&#xff09;二、安装以及配置Kafka、zookeeper1.下载Kafka&#xff08;无需下载…

IBM安全发布《2023年数据泄露成本报告》,数据泄露成本创新高

近日&#xff0c;IBM安全发布了《2023年数据泄露成本报告》&#xff0c;该报告针对全球553个组织所经历的数据泄露事件进行深入分析研究&#xff0c;探讨数据泄露的根本原因&#xff0c;以及能够减少数据泄露的技术手段。 根据报告显示&#xff0c;2023年数据泄露的全球平均成…

产品经理,需要具备哪些能力和知识

作为产品经理&#xff0c;需要具备以下能力和知识&#xff1a; 产品管理能力&#xff1a;具备全面的产品管理能力&#xff0c;包括产品策划、需求分析、产品规划、产品设计、项目管理、市场调研和竞争分析等。 用户导向思维&#xff1a;能够理解用户需求和期望&#xff0c;以…

docker安装kafka单机详细步骤

1: 安装docker环境 略 &#xff08;转载&#xff09;centos7安装Docker详细步骤&#xff08;无坑版教程&#xff09;_屌丝的程序员的博客-CSDN博客 2.拉取zookeeper和kafka的镜像 2.1: 拉取zookeeper的镜像&#xff0c;并运行 docker pull wurstmeister/zookeeperdocker r…

17 Linux之大数据定制篇-Shell编程

17 Linux之大数据定制篇-Shell编程 文章目录 17 Linux之大数据定制篇-Shell编程17.1 Shell编程简介17.1.1 为什么要学习Shell编程17.1.2 Shell是什么17.1.3 执行Shell脚本 17.2 Shell的变量17.2.1 Shell变量介绍17.2.2 设置环境变量17.2.3 位置参数变量17.2.4 预定义变量 17.3 …

java接口(实例运用)

1.对象数组的排序 数组我们有一个现成的 sort 方法就是可以拿来对数组进行排序操作的&#xff0c;但是能不能对一个对象数组进行排序呢&#xff1f;答案是不可以的&#xff01;对象数组中的每个元素都是一个实例化的对象&#xff0c;对象中的成员属性复杂&#xff0c;你直接调用…

26 Linux高级篇-Linux面试题

26 Linux高级篇-Linux面试题 文章目录 26 Linux高级篇-Linux面试题1.分析日志t.txt(访问量)&#xff0c;将各个ip地址截取&#xff0c;并统计出现次数&#xff0c;并按从大到小排序(腾讯)2.统计连接到服务器的各个ip情况&#xff0c;并按连接数从大到小排序(腾讯)3.如忘记了mys…

【Kali Linux高级渗透测试】深入剖析Kali Linux:高级渗透测试技术与实践

&#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff0c;喜爱音乐的一位博主。 &#x1f4d7;本文收录于恒川的日常汇报系列&#xff0c;大家有兴趣的可以看一看 &#x1f4d8;相关专栏C语言初阶、C…

玩转Mysql系列 - 第8篇:详解排序和分页(order by limit),及存在的坑

这是Mysql系列第7篇。 环境&#xff1a;mysql5.7.25&#xff0c;cmd命令中进行演示。 代码中被[]包含的表示可选&#xff0c;|符号分开的表示可选其一。 本章内容 详解排序查询 详解limit limit存在的坑 分页查询中的坑 排序查询&#xff08;order by&#xff09; 电商…

基于java Swing 和 mysql实现的购物管理系统(源码+数据库+说明文档+运行指导视频)

一、项目简介 本项目是一套基于java Swing 和 mysql实现的购物管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、项目文档、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过…

Effetive STL | 条款2 : 小心对“容器无关代码”的幻想

Effetive STL | 条款2 &#xff1a; 小心对“容器无关代码”的幻想 文章目录 Effetive STL | 条款2 &#xff1a; 小心对“容器无关代码”的幻想STL 容器特点推行自己的容器容器能力的交集 封装Method1: typedefMethod2: class>>>>> 欢迎关注公众号【三戒纪元】…

如何通过内网穿透实现外部网络对Spring Boot服务端接口的HTTP监听和调试?

文章目录 前言1. 本地环境搭建1.1 环境参数1.2 搭建springboot服务项目 2. 内网穿透2.1 安装配置cpolar内网穿透2.1.1 windows系统2.1.2 linux系统 2.2 创建隧道映射本地端口2.3 测试公网地址 3. 固定公网地址3.1 保留一个二级子域名3.2 配置二级子域名3.2 测试使用固定公网地址…

Python爬虫:打开盈利大门的利器

导言&#xff1a; 随着互联网的迅速发展&#xff0c;越来越多的企业和个人开始意识到数据的重要性。而Python爬虫作为一种自动化获取互联网信息的技术&#xff0c;为人们提供了更便捷、高效的数据获取方式。本文将介绍基于Python爬虫的五种盈利模式&#xff0c;并提供实际案例…

微信小程序 - 2023年最新版手机号快捷登录详细教程

前言 最近开发公司手机快捷登录的功能&#xff0c;花费了不少时间&#xff0c;这里附上详细教程。 这里以海底捞小程序的图片为例&#xff0c;如有侵权请联系小编删除。 代码如下 <button open-type"getPhoneNumber" getphonenumber"getPhoneNumber"…

oracle 基础运用2

首先在电脑上安装PLSQL developer&#xff0c;这个是oracle图形化连接工具&#xff0c;然后安装win64_11gR2_client&#xff0c;这个是orace客户端&#xff0c;安装完成后可以在cmd命令行输入sqlplus命令进行验证&#xff0c;如图表示安装成功。 作为sys的连接应该是SySDBA或Sy…

一些关于异构SOC IPC核间通信的知识

帮你了解一些关于异构SOC IPC核间通信的知识。 异构SOC是指在一个芯片上集成了不同类型的处理器核&#xff0c;例如ARM、DSP、GPU等&#xff0c;它们可以协同工作&#xff0c;提高性能、降低功耗、节省成本和空间。 IPC&#xff08;Inter-Processor Communication&#xff0…

vxe-table全选禁用并保留选中项

需求&#xff1a;1、新建时全选可用&#xff0c;提交后全选不可用&#xff1b;2、提交后新建时选中的记录还要保持选中状态 官网上写的是可以通过 strict 设置为严格模式&#xff0c;当表格中不存在有效数据时列头复选框为禁用状态。 通过设置strict可以实现第一个需求&#…

万物流动 万物永驻 ——C++ Core Guidelines的流动哲学

众所周知&#xff0c;C 是一门自由的语言&#xff0c;语言的设计哲学之一就是赋予程序员极大的自由度和灵活性&#xff0c;因此&#xff0c;使用C 完成一个任务时&#xff0c;不同的程序员往往会有不同的实现方法&#xff0c;这真正阐释了什么叫条条大路通罗马。不过&#xff0…

Android Activity 启动流程 二:setContentView

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、概览二、setContentView&#xff08;&#xff09;三…