A-A+

如何通过js修改keyframes里面的值?

2016年01月24日 JavaScript 暂无评论 阅读 627 次

方法一:

<!DOCTYPE html>
<html>
<style>
div.a {
animation: myfirst 1s;
-webkit-animation: myfirst 1s;
}
</style>
<style id=dynamic></style>
<body>
<div id='a'>
123
</div>
<script>
var colors = ['red','yellow','blue','green']
window.setTimeout(function (){
var color = colors.shift()
console.log(color)
if (!color) return
var style = document.getElementById("dynamic")
style.innerHTML = '@-webkit-keyframes myfirst{50% {background: '+color+';} }\n'
+ '@keyframes myfirst {50% {background: '+color+';}}'
var a = document.getElementById('a')
a.className = 'a'

window.setTimeout(function(){
a.className = ''
},1000)
window.setTimeout(arguments.callee,1500)
},1000)
</script>
</body>
</html>

方法二:直接修改 keyframes 内容似乎不行,所以采取了迂回的路线,重新定义 animation 来达到目的。

http://segmentfault.com/q/1010000002561714

http://jsfiddle.net/7cesyc3b/2/

keyframes之所以是复数,就是因为它里面还包含很多子样式keyframe
keyframe相当于普通CSS样式的rule,所以keyframe对象才有 style 属性,可以用来进行修改

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录