js动态设置关键侦@keyframes

js动态设置关键侦@keyframes

1.前置知识

关键侦@keyframes规则通过在动画序列中定义关键侦的样式来控制CSS动画序列的中间步骤

@keyframes slidein {from {transform: translateX(0%);}to {transform: translateX(100%);}
}
// from 等价于 0%;to 等价与 100%
// 或者
@keyframes slidein {0% {top: 0;left: 0;}30% {top: 50px;}68%,72% {left: 50px;}100% {top: 100px;left: 100%;}
}

注意,如果在CSS中定义了两个相同名字的keyframes,后这会覆盖前者
在这里插入图片描述

在这里插入图片描述
如上图所示,定义了两个相同的动画侦之后,最终在浏览器中应用的是后者

2.js动态控制keyframes

背景
在 Vue 项目中由于 css 样式是直接写在 style 标签中的,那些值都是事先写死的,比如说上面的 translateX(disX),disX 是通过 js 动态计算出来的。如果要实现动画的效果是通过js动态计算出来的,会比较困难。所以可以通过 js 去设置 styleSheet 里面的样式规则,从而能够动态的控制 keyframes

StyleSheetjavaScript中表示样式表的接口,而styleSheet是一个DOM元素的对应属性,用于获取该元素所关联的样式表

  • 获取样式表:通过styleSheet属性可以获取元素关联的样式表
// 获取第一个样式表
const firstStyleSheet = document.styleSheet[0]
// document.styleSheet 可以理解为一个二维数组(但是不是数组)
// 有多个样式表,每个样式表中都有多条规则
  • 插入样式列表:通过样式列表的insertRules方法可以在样式列表中插入新的规则
const styleSheet = document.styleSheet[0]
styleSheet.insertRule(`.styleSheetCls { width: 200px; height: 200px}`,0)
// insertRule 方法中的第二个参数表示将样式插入样式表的哪里
// 这个规则会出现在第一个样式表的第一条
  • 删除样式规则:使用样式表的deleteRule方法可以删除指定位置的规则
const styleSheet = document.styleSheet[0]
styleSheet.deleteRule(0)
// 删除第一个样式表的第一条

我们可以通过styleSheetinsertRule方法动态的添加关键侦样式

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态添加 Keyframes</title><style id="dynamic-styles"></style>
</head>
<body><div id="myDiv"></div><script>// 获取样式表// 这里始终将新的 keyframes 规则添加在第一个样式表的第一条const styleSheet = document.styleSheet[0];let dis = 0//... 动态计算 dis 的值// 动态创建 @keyframesconst keyframesName = 'dynamicAnimation';const keyframesRule = `@keyframes ${keyframesName} {0% { transform: translateX(${dis}px); }25% { transform: translateX(-${dis}px) rotate(0.5deg); }50% { transform: translateX(${dis}px) rotate(-0.5deg); }75% { transform: translateX(-${dis}px) rotate(0.5deg); }100% { transform: translateX(0); }}`// 每次添加新的规则之前,可以将之前的规则给删除掉,这样就可以避免第一个样式表的规则里面有多条重复名称的 keyframes,避免相同名字的 keyframes 前者被后者覆盖// 获取第一个样式表的第一条规则的名称const firstRules = styleSheet.rules || styleSheet.cssRules// 这里面第一条规则不是 keyframes 规则,从而导致获取 name 失败const ruleName = firstRules[0].name ? firstRules[0].name : ''if(ruleName === keyframesName) {/*** 这里能够直接删除,是因为我始终将 keyframes 添加在第一个样式表的第一条规则中* 如果不能确定样式位置,那么就需要遍历整个样式表,找到目标样式表的位置* document.styleSheet 可以理解为一个二维数组(但是不是数组,不适合使用数组的遍历方式进行遍历)* 有多个样式表,每个表中都有多条规则**/ styleSheet.deleteRule(0)}// 这里始终将新的 keyframes 规则添加在第一个样式表的第一条styleSheet.insertRule(keyframesRule, 0);// 动态应用 @keyframesconst myDiv = document.getElementById('myDiv');myDiv.style.animation = `${keyframesName} 2s ease-in-out`;</script>
</body>
</html>

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

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

相关文章

2024海南高层次E类人才认定

2024年海南省高层次人才享受什么待遇&#xff1f;海南高层次人才住房补贴多少钱&#xff1f;海南高层次E类人才待遇有哪些&#xff1f;什么是海南高层次E类人才&#xff1f;E类人才怎么申请&#xff1f;这篇文章给大家详细介绍一下。 1.E类人才在海南有什么好处&#xff1f; …

[UI5] ODATA V4中的CRUD

文章目录 前言一、Read二、Create三、Update四、Delete 前言 ODATA V4在CRUD方面与V2截然不同。 这篇文章简单介绍V4中是如何进行CRUD操作 一、Read Model不再有read方法&#xff0c; 一般是把Path绑定到View中进行读取&#xff0c; 如果需要额外的读取数据&#xff0c;可使用…

mysql进阶 - 存储过程

目录 1. 用途&#xff1a; 2. 相关语法 2.1 创建 2.1.1 语法 2.1.2 示例 2.2 查看存储过程 2.3 调用 2.4 修改存储过程 2.5 删除存储过程 1. 用途&#xff1a; 存储过程广泛存在于一些遗留系统&#xff0c;可以减少代码的编写。而近些年&#xff0c;存储过程很少再用…

UML-类图和类图转化为代码

提示&#xff1a;文章详细的讲解了类图的四种关系&#xff0c;以及每种关系如何转化为对应的代码。 UML-类图和类图转化为代码 一、类于类之间的关系1.依赖关系2.关联关系(1) 单向关联(2) 双向关联(3) 自关联(4) 聚合关联(has-a)(5) 组合关联&#xff08;contains-a&#xff09…

c++ 容器举例

C 提供了多种容器&#xff0c;包括数组、向量、列表、集合、映射等。以下是几个 C 容器的简单示例&#xff1a; 1&#xff0c;数组 #include <iostream> int main() { int arr[5] {1, 2, 3, 4, 5}; for (int i 0; i < 5; i) { std::cout << arr[i] <…

Python系列(1):简洁优雅,功能强大的编程语言

Python&#xff1a;简洁优雅&#xff0c;功能强大的编程语言 一、Python的特点二、Python的应用领域 在当今的编程世界中&#xff0c;Python已经成为了一种无处不在的语言。它不仅简单易学&#xff0c;而且功能强大&#xff0c;支持多种编程范式&#xff0c;包括面向对象编程、…

Servlet-Request

一、预览 在上一篇Servlet体系结构中&#xff0c;我们初步了解了怎么快速本篇将介绍Servlet中请求Request的相关内容&#xff0c;包括Request的体系结构&#xff0c;Request常用API。 二、Request体系结构 我们注意到我们定义的Servlet类若实现Servlet接口时&#xff0c;请求…

openssl3.2 - 官方demo学习 - saccept.c

文章目录 openssl3.2 - 官方demo学习 - saccept.cEND openssl3.2 - 官方demo学习 - saccept.c 建立TLSServer(使用了证书, 和证书中的私钥), 接收客户端的连接, 并将客户端发来的信息打印到屏幕 笔记 /*! \file saccept.c */ /*! \brief 建立TLSServer(使用了证书, 和证书中…

企业网站建设中常用的英文翻译

下面好代码网在长期的网站建设业务中总结的&#xff0c;一些在企业网站建设中词语的常用翻译&#xff0c;可以让你的企业网站更具有专业性。如果你做中英文双语版本网站或者外贸网站的请收藏备用。 网站导航 site map 公司简介 PROFILE or COMPANY Profile or Company 综述 Gen…

学习Qt笔记

前言&#xff1a; 学习笔记的内容来自B站up主阿西拜编程 《Qt6 C开发指南 》2023&#xff08;上册&#xff0c;完整版&#xff09;_哔哩哔哩_bilibili《Qt6 C开发指南 》2023&#xff08;上册&#xff0c;完整版&#xff09;共计84条视频&#xff0c;包括&#xff1a;00书籍介…

【UE Niagara学习笔记】07 - 火焰的热变形效果

目录 效果 步骤 一、创建热变形材质 二、添加新的发射器 2.1 设置粒子材质 2.2 设置粒子初始大小 2.3 设置粒子持续生成 三、修改材质 四、设置粒子效果 在上一篇博客&#xff08;【UE Niagara学习笔记】06 - 制作火焰喷射过程中飞舞的火星&#xff09;的基础上继续…

IPv6组播技术

IP组播 作为IP传输三种方式之一,IP组播通信指的是IP报文从一个源发出,被转发到一组特定的接收者。相较于传统的单播和广播,IP组播可以有效地节约网络带宽、降低网络负载,所以被广泛应用于IPTV、实时数据传送和多媒体会议等网络业务中。 组播服务模型 ASM(Any-Source Mu…

【MySQL】导入导出SQL脚本及远程备份---超详细介绍

目录 前言&#xff1a; 一 navcat导入导出 1.1 导入 1.2 导出 二 mysqldump 导入导出 2.1 导入 2.2 导出 三 load data infile命令导入导出 3.1 导入 3.2 导出 四 远程备份 五 思维导图 前言&#xff1a; 随着当今企业发展&#xff0c;数据库的数据越来越多&…

Qt/QML编程学习之心得:slider(34)

滑条slider&#xff0c;有时也成为进度条progressbar&#xff0c;在GUI界面中也是经常用到的。 import QtQuick 2.9 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.2ApplicationWindow {id:rootvisible: truewidth: 1920height: 720//title: qsTr("Hello World&q…

FreeRTOS系统配置

一、前言 在实际使用FreeRTOS 的时候我们时常需要根据自己需求来配置FreeRTOS&#xff0c;而且不同架构 的MCU在使用的时候配置也不同。FreeRTOS的系统配置文件为FreeRTOSConfig.h&#xff0c;在此配置文件中可以完成FreeRTOS的裁剪和配置&#xff0c;这是非常重要的一个文件&a…

Elasticsearch ES实现GEO位置搜索

ES实现GEO位置搜索 Elasticsearch-7.15.2 附近查询&#xff0c;也叫做距离查询&#xff08;geo_distance&#xff09;&#xff1a;查询到指定中心点小于某个距离值的所有文档。 创建索引 (my_geo)&#xff0c;直接设置mapping GEO字段的创建&#xff1a;添加一个字段locatio…

Kubernetes 集群管理—日志架构

日志架构 应用日志可以让你了解应用内部的运行状况。日志对调试问题和监控集群活动非常有用。 大部分现代化应用都有某种日志记录机制。同样地&#xff0c;容器引擎也被设计成支持日志记录。 针对容器化应用&#xff0c;最简单且最广泛采用的日志记录方式就是写入标准输出和标…

必练的100道C语言程序设计练习题(上)

前言: 在计算机编程的世界中&#xff0c;C语言一直是一门备受推崇的语言。它的简洁性、高效性以及广泛应用使得学习C语言成为每一位程序员的必由之路。然而&#xff0c;掌握这门语言并不是一蹴而就的事情&#xff0c;它需要不断的练习和实践。为了帮助各位编程爱好者更好地理解…

整合junit与热部署

整合junit <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><version>2.7.0</version></dependency> 测试类上添加SpringBootTest 如&#xff1a; 注意测试类的…

计算机组成原理 CPU的功能和基本结构和指令执行过程

文章目录 CPU的功能和基本结构CPU的功能CPU的基本结构 指令执行过程指令周期概念指令执行方案指令数据流取周期数据流析指周期数据流执行周期数据流中断周期数据流 数据通路的功能和基本结构数据通路的功能数据通路的结构单总线 CPU的功能和基本结构 #mermaid-svg-jr0QOEyC6Q92…