【javascript】js动态生成keyframe的坑

前言

有些稍微复杂的动画效果不能单单通过transition解决，需要使用animation。一般情况keyframe都是自己早在css写好的，那么如果需要动态写keyframe呢？

解决方法

大家都百度到了，在document.stylesSheets里，里面有很多CSSStyleSheet。其中的rules存放着用户定义的keyframes。
但是坑在这，写项目很多用的别人的组件，你不知道什么时候这个里面会多增加一个，什么时候会减少一个。一般来说，最常想到的方法就是取stylesSheets的最后一个元素里的rules进行添加或者修改。但是！！这个方法不是总是有效的。 经过我打断点研究发现，有时候styleSheets会增加一个元素，这个元素里啥也没有，当js执行我函数逻辑时，我把以前老的keyframe删除了（动态生成keyframe，把以前同名的keyframe删除），于是自然新增会新增在这个新元素里。当时的断点看新增的没毛病，结果过了断点之后这个元素里的keyframe都消失了。
所以我将写入rules逻辑给改了下，变成如果有同名keyframe需要删除，那么就在那个元素里新增keyframe。

  function insertStyleSheetRule(ruleText:string){let sheets = document.styleSheets if(sheets.length == 0){let style = document.createElement('style');style.appendChild(document.createTextNode(""));document.head.appendChild(style);}//要动态生成不同的anmation,所以要把前面创建的相同anmation给删了let reg = /(?<=@keyframes\s+?)(.+?)(?=\s+?{)/let match = ruleText.match(reg)let name match?name = match[0]:nulllet ss:number|null =nulllet st:number|null=nullif(name){for(let i in sheets){for(let k in sheets[i].rules){if(sheets[i].rules[k].name==name){ss=parseInt(i)st=parseInt(k)//每次只传一个属性，所有表里只能有一个同名}}}if(ss!==null){sheets[ss].deleteRule(st)}}let sheet = sheets[ss?ss:sheets.length - 1] as CSSStyleSheetsheet.insertRule(ruleText, sheet.rules ? sheet.rules.length : sheet.cssRules.length);}

我这个正则写的比较简单，主要就是提取keyframe的名字。
如果只需要动态新增一个keyframe的可以把我中间那些判断同名keyframe并且删除的逻辑给删了。
传入keyframe就传字符串就行，里面可以动态修改值。

insertStyleSheetRule(`@keyframes hor-animation {0% { transform: translateX(0px); } 100% { transform: translateX(${-moveX}px); }
}`)
insertStyleSheetRule(`@keyframes vertical-animation {0% { transform: translateY(0px); } 100% { transform: translateY(${moveY}px); }
}`)

【javascript】js动态生成keyframe的坑相关推荐

js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
js动态生成html表格
刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有 ...
写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好
如果写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好点?为什么? 不考虑人力因素(手写HTML太费时间排除),请从读取和解析或者其他的角度分析.谢谢添加评论分享按投票 ...
JavaScript网页——动态生成表格
1.创建学生数据分析:因为里面的学生数据都是动态的,我们需要js动态生成.这里我们模拟数据,自己定义好数据.数据我们采取对象形式存储. var students = [{name:'吕小布',sub ...
HTML通过JS动态生成简单网页
HTML通过JS动态生成简单网页 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
cesium + kriging.js动态生成克里金图
cesium + kriging.js动态生成克里金图 kriging.js GIThub地址 :: https://github.com/oeo4b/kriging.js/blob/master/k ...
抓取js动态生成的数据分析案例
需求: 爬取https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/data018d244441062d8916dd472a4c6a0a0b.htm ...
js动态生成数据列表
我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...
2）JS动态生成HTML元素的爬取
2)JS动态生成HTML元素的爬取 import java.util.List;import org.openqa.selenium.By; import org.openqa.selenium.We ...

【javascript】js动态生成keyframe的坑

前言

解决方法

【javascript】js动态生成keyframe的坑相关推荐

最新文章

热门文章