当前位置： 首页 > news >正文

js动态设置关键侦@keyframes

news 2026/4/1 20:50:01

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

StyleSheet是javaScript中表示样式表的接口，而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)
// 删除第一个样式表的第一条

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

<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 dynamicAnimation{0% { transform: translateX(5px); }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>
3. 编写技巧
  • 在编写keyframes规则时，我比较推荐在在style标签中将动画规则写好了在复制到JavaScript逻辑代码中，因为如果动画规则编写有问题，那么在insertRule插入样式的时候，可能会导致样式表识别不了
  • 查看是否添加成功，可以在控制台打印出来样式表，寻找我们添加的规则，如下图
    在这里插入图片描述
    可以看到第一个样式表中的第一个样式是我们添加的keyframes样式，并且识别成功了会有CSSKeyframesRule的属性，里面就是我们定义的每一帧的动画样式

相关文章：

js动态设置关键侦@keyframes

js动态设置关键侦keyframes 1.前置知识 关键侦keyframes规则通过在动画序列中定义关键侦的样式来控制CSS动画序列的中间步骤 keyframes slidein {from {transform: translateX(0%);}to {transform: translateX(100%);} } // from 等价于 0%&#xff1b;to 等价与 100% // 或…...

编程日记 2024/1/17 3:46:04

【WPF.NET开发】流文档

本文内容 什么是流文档&#xff1f;流文档类型创建流内容与流相关的类内容架构自定义文本 流文档旨在优化查看和可读性。 流文档根据运行时变量&#xff08;例如&#xff0c;窗口大小、设备分辨率和可选的用户首选项&#xff09;来动态调整和重新排列内容&#xff0c;而不是设…...

编程日记 2024/1/17 3:44:00

golang学习-结构体

1、定义 使用type 和struct 关键字来定义结构体&#xff0c;是值类型 格式如下&#xff1a; type 类型名 struct { 字段名 类型 字段名 类型 ... } 2、实例化 1、var 结构体实例 结构体类型 var p1 Person 2、使用new关键字 var p2 new(Person) 3、使用&对结构体…...

编程日记 2024/1/17 3:40:58

Python：enumerate() 函数

enumerate() 函数用于同时遍历索引和元素&#xff0c;常用于循环中。这个函数返回一个包含索引和元素的元组&#xff0c;可以通过解包的方式获取它们。 使用方法&#xff1a; enumerate(iterable, start0). iterable: 要遍历的可迭代对象。start: 索引起始值&#xff0c;默认…...

编程日记 2024/1/17 3:38:56

FPGA 移位运算与乘法

题目&#xff1a; 已知d为一个8位数&#xff0c;请在每个时钟周期分别输出该数乘1/3/7/8,并输出一个信号通知此时刻输入的d有效&#xff08;d给出的信号的上升沿表示写入有效&#xff09; 由题意可知&#xff1a; 复位信号高有效&#xff0c;低复位&#xff1b;在inpu_grant上升…...

编程日记 2024/1/17 3:36:54

网络安全B模块（笔记详解）- MYSQL信息收集

MYSQL信息收集 1.通过渗透机场景Kali中的渗透测试工具对服务器场景MySQL03进行服务信息扫描渗透测试（使用工具Nmap，使用必须要使用的参数），并将该操作显示结果中数据库版本信息作为Flag提交； Flag：MySQL 5.5.12 2.通过渗透机场景Kali中的渗透测试工具对服务器场景MySQL0…...

编程日记 2024/1/17 3:35:53

从JavaScript的角度上讲解一下xml

- XML&#xff08;可扩展标记语言&#xff09; XML&#xff08;可扩展标记语言&#xff09;是一种被设计用于存储和传输结构化数据的标记语言。它与HTML相似&#xff0c;但XML并没有预定义的标签&#xff0c;可以自定义标签及其属性。从JavaScript的角度来看&#xff0c;XML可以…...

编程日记 2024/1/17 3:34:52

Pandas实战100例 | 案例 13: 数据分类 - 使用 `cut` 对数值进行分箱

案例 13: 数据分类 - 使用 cut 对数值进行分箱 知识点讲解 在数据分析中&#xff0c;将连续的数值数据分类成不同的区间&#xff08;或“分箱”&#xff09;是一种常见的做法。Pandas 提供了 cut 函数&#xff0c;它可以根据你指定的分箱边界将数值数据分配到不同的类别中。 …...

编程日记 2024/1/17 3:30:49

python统计分析——操作案例（模拟抽样）

参考资料&#xff1a;用python动手学统计学 import numpy as np import pandas as pd from matplotlib import pyplot as plt import seaborn as snsdata_setpd.read_csv(r"C:\python统计学\3-4-1-fish_length_100000.csv")[length] #此处将文件路径改为自己的路…...

编程日记 2024/1/17 3:28:47

部署Tomcat及其负载均衡

Tomcat服务器是一个免费的开放源代码的Web应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;在中小型系统和并发访问用户不是很多的场合下被普遍使用&#xff0c;是开发和调试JSP程序的首选。一般来说&#xff0c;Tomcat虽然和Apache或者Nginx这些Web服务器一样&#xf…...

编程日记 2024/1/17 3:27:46

C++ 类、结构体

C 类、结构体 类可以将变量、数组和函数完美地打包在一起。 类与结构体 类的定义&#xff1a; class Person {private:int age,height;double money;string books[100];public:string name;void say(){cout<<"Im"<<name<<endl;}int get_age(){…...

编程日记 2024/1/17 3:26:45

数据结构（三）堆和哈希表

目录 哈希表和堆什么是哈希表 &#xff1f;什么是堆 &#xff1f;什么是图 &#xff1f;案例一&#xff1a;使用python实现最小堆案例二 &#xff1a; 如何用Python通过哈希表的方式完成商品库存管理闯关题 &#xff08;包含案例三&#xff1a;python实现哈希表&#xff09; 本…...

编程日记 2024/1/17 3:24:42

李宏毅LLM——ChatGPT原理剖析

文章目录 Chat-GPT引言关键技术——预训练研究问题玩文字冒险游戏 ChatGPT原理剖析 Chat-GPT引言 直观感受&#xff1a;结果有模有样、每次输出结果都不同、可以追问、幻想出的答案误解&#xff1a;罐头回答、答案是网络搜索的结果真正做的事&#xff1a;文字接龙&#xff0c;…...

编程日记 2024/1/17 3:21:40

让Windows上vscode的C语言scanf函数可以读取中文字符

windows的默认字符集保存为GBK不要修改 区域设置–时钟和区域–区域–管理–更系统区域设置–&#xff08;不要勾选&#xff09;使用UTF-8。 查看验证当前字符集&#xff1a; cmdchcp 活动代码页: 936936就是简体中文GBK vscode的setting.json文件添加如下代码 点击左下角…...

编程日记 2024/1/17 3:18:37

Linux命令（3）

一. tr 对字符进行处理&#xff1a; tr 命令用于字符转换、替换和删除&#xff0c;主要用于删除文件中的控制符或进行字符串转换等。 将a转换成1 将小写字母转换成大写 压缩: tr -s 将a压缩成一个a 将空格压缩成一个 删除&#xff1a; tr -d 补集: 用字符串中的字符集的补…...

编程日记 2024/1/17 3:17:36

安卓MediaRecorder(3)音频采集编码写入详细源码分析

文章目录 前言音频采集音频初始化AudioRecord 分析AudioSource 采集到音频 音频编码音频编码后数据处理MPEG4Writer写入音频编码后数据到文件MPEG4Writer::Track 取编码后的音频编数据结语 本文首发地址 https://blog.csdn.net/CSqingchen/article/details/134896808 最新更新地…...

编程日记 2024/1/17 3:14:33

2024年网络安全竞赛—网络安全事件分析应急响应解析（包含FLAG）

网络安全事件分析应急响应 目录 网络安全事件分析应急响应 解析如下：...

编程日记 2024/1/17 3:13:32

FineBI实战项目一（22）：各省份订单个数及订单总额分析开发

点击新建组件&#xff0c;创建各省份订单个数及订单总额组件。 选择自定义图表&#xff0c;将province拖拽到横轴&#xff0c;将cnt和total拖拽到纵轴。 调节纵轴的为指标并列。 修改横轴和纵轴的标题。 修改柱状图样式&#xff1a; 将组件拖拽到仪表板。 结果如下&#xff1a;…...

编程日记 2024/1/17 3:09:29

2024.1.16 调用tinyspline样条曲线拟合库时报 stack smashing detected，CMakeLists.txt中屏蔽该异常

在函数中调用第三方库api拟合样条曲线&#xff0c;函数中一切正常&#xff0c;可以打印所有数组变量&#xff0c;重复执行该函数&#xff0c;某一次函数return时报 stack smashing deteced &#xff08;unknown&#xff09; &#xff0c;原因可能是第三方库内部的函数有栈溢出风…...

编程日记 2024/1/17 3:07:27

Leetcode202快乐数（java实现）

今天分享的题目是快乐数&#xff1a; 快乐数的定义如下&#xff1a; 快乐数&#xff08;Happy Number&#xff09;是指一个正整数&#xff0c;将其替换为各个位上数字的平方和&#xff0c;重复这个过程直到最后得到的结果为1&#xff0c;或者无限循环但不包含1。如果最终结果为…...

编程日记 2024/1/17 3:06:26

零基础玩转mxbai-embed-large-v1：6大核心功能实战，从向量化到摘要生成

零基础玩转mxbai-embed-large-v1&#xff1a;6大核心功能实战&#xff0c;从向量化到摘要生成 1. 引言&#xff1a;为什么选择mxbai-embed-large-v1&#xff1f; mxbai-embed-large-v1是当前自然语言处理领域的一颗新星&#xff0c;这款多功能句子嵌入模型在MTEB基准测试中表…...

编程新知 2026/4/1 20:25:48

FRCRN处理长音频文件实战：切片、批处理与结果合并

FRCRN处理长音频文件实战&#xff1a;切片、批处理与结果合并 你是不是遇到过这样的问题&#xff1f;手头有一段长达数小时的会议录音、访谈素材或者播客音频&#xff0c;背景噪音让人头疼&#xff0c;想用FRCRN这样的降噪模型处理一下&#xff0c;结果发现模型一次只能处理几…...

编程新知 2026/4/1 19:43:14

从LFA到TI-LFA：一张图看懂华为IGP FRR技术演进与选型指南

从LFA到TI-LFA&#xff1a;华为IGP FRR技术全景解析与实战选型 当视频会议因网络抖动出现卡顿时&#xff0c;当金融交易因路由收敛延迟导致订单丢失时&#xff0c;网络工程师们开始意识到&#xff1a;传统的IGP收敛机制已无法满足现代业务对可靠性的苛刻要求。这背后是毫秒级故…...

编程新知 2026/4/1 19:37:12

translategemma-4b-it优化升级：Ollama部署后提升翻译质量的4个技巧

translategemma-4b-it优化升级&#xff1a;Ollama部署后提升翻译质量的4个技巧 你已经成功用Ollama部署了translategemma-4b-it&#xff0c;看着它把图片里的英文变成中文&#xff0c;是不是觉得挺神奇的&#xff1f;但用了几次后&#xff0c;你可能会发现一些问题&#xff1a…...

编程新知 2026/4/1 19:29:10

Flutter Documentation Website的布局系统：理解Flutter的约束模型

Flutter Documentation Website的布局系统&#xff1a;理解Flutter的约束模型 【免费下载链接】website Flutter documentation web site 项目地址: https://gitcode.com/gh_mirrors/websi/website Flutter Documentation Website的布局系统基于独特的约束模型&#xff…...

编程新知 2026/4/1 18:50:53

Claude Code 源码泄露深度剖析，Anthropic AI 编程助手的架构全解密

2026年3月31日&#xff0c;整个AI开发圈被一条消息炸开了锅。安全研究员Chaofan Shou&#xff08;推特账号Fried_rice&#xff09;在Anthropic官方发布的npm包中&#xff0c;意外发现了一个暴露的.map文件&#xff0c;正是这个看似不起眼的文件&#xff0c;直接泄露了Claude Co…...

编程新知 2026/4/1 18:23:31

C++手动实现共享智能指针my_shared_ptr｜引用计数+删除器+完整可运行代码

1.共享智能指针的概念 共享型智能指针就是做出一个像JAVA中垃圾回收器，并且可以运用到所有资源，heap内存和系统资源都可以使用的系统。 shared_ptr实现了共享所有权（shared ownership）方式来管理资源对象，这意味没有一个特定的shared_ptr拥有资源对象。相反，这些指向同一…...

编程新知 2026/4/1 18:14:53

sinx/x在0到无穷积分的条件收敛性分析与证明

1. 从物理现象到数学问题&#xff1a;为什么研究sinx/x的积分&#xff1f; 我第一次接触sinx/x的积分是在信号处理课程中&#xff0c;这个看似简单的函数在傅里叶变换和频谱分析中扮演着关键角色。工程师们用它来描述理想低通滤波器的频率响应&#xff0c;物理学家则在衍射现象…...

编程新知 2026/4/1 17:59:57

深圳小学数学期末试卷创新题型引热议，数学与文学跨界融合成焦点

1. 当数学题遇上古诗词&#xff1a;深圳试卷创新设计背后的教育逻辑 深圳某区五年级数学期末卷上的一道"跨界题"最近在家长群炸开了锅。题目要求学生分析函数单调性后&#xff0c;将其与《琵琶行》中琵琶女的情感变化对应起来。这种"数学古诗文"的混搭模式…...

编程新知 2026/4/1 17:31:04

高性能无线基带FPGA实现：开源802.11 WiFi实时信号处理架构解析

高性能无线基带FPGA实现&#xff1a;开源802.11 WiFi实时信号处理架构解析 【免费下载链接】openwifi open-source IEEE 802.11 WiFi baseband FPGA (chip) design: driver, software 项目地址: https://gitcode.com/gh_mirrors/op/openwifi Openwifi是一个基于软件定义…...

编程新知 2026/4/1 16:45:08