前言
- 有些稍微复杂的动画效果不能单单通过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);
}
let reg = /(?<=@keyframes\s+?)(.+?)(?=\s+?{)/
let match = ruleText.match(reg)
let name
match?name = match[0]:null
let ss:number|null =null
let st:number|null=null
if(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 CSSStyleSheet
sheet.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); }
}`)