当元素含有animation属性,并且现需要动态计算keyframe变化的值
动态改变keyframe
通过JavaScript动态改变animation的keyframe比较麻烦,造成此问题的原因也是受限于CSSOM的API,特别是定义了多个帧的frame时,js基本无法去在运行时动态改变,只能通过重写styleSheets中的cssRule来实现
function findKeyframesRule(animName) {
var rule;
var ss = document.styleSheets;
for (var i = 0; i < ss.length; ++i) {
for (var x = 0; x < ss[i].cssRules.length; ++x) {
rule = ss[i].cssRules[x];
if (rule.name == animName && (rule.type
== CSSRule.KEYFRAMES_RULE || ss[i].cssRules[j].type == CSSRule.WEBKIT_KEYFRAMES_RULE )) {
return rule;
}
}
}
}
//删除旧的动画添加新的
function change(selector,animName)
{
var keyframes = findKeyframesRule(animName);
// 删除已经存在的开始和结束帧
keyframes.deleteRule("0%");
keyframes.deleteRule("100%");
var clientWidth = document.documentElement.clientWidth/2 || document.body.clientWidth/2 //此处为举例
keyframes.insertRule("0% { -webkit-transform: translate("+clientWidth+"px); }");
keyframes.insertRule("100% { -webkit-transform: translate(-"+clientWidth/2+"px); }");//结束移动屏幕一半
// 重新指定动画名字使之生效
document.querySelector(selector).style.webkitAnimationName = animName;
}
复制代码
此段代码对于未跨域link引入的css是可以生效,但是对于跨域的css在chrome下findKeyframesRule会取不到cssRule
设置cssRule
- addRule(selector, rules, [index]) IE
- deleteRule(index) FireFox
- insertRule(rule, index) FireFox
- removeRule([index]) IE