CSS animation,用 JS 修改 duration 无效

Sulli
  • 99

http://jsbin.com/qafahamugu/1/edit?css,js,output

<body>
<div class="blinksth animated"></div>  
<a href="javascript:void(0)" class="change">change</a>
<a href="javascript:void(0)" class="paused">paused</a>
<a href="javascript:void(0)" class="running">running</a>
<a href="javascript:void(0)" class="change-class">changeClass</a>
</body>
.animated {
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function:ease-in-out;
}
.animated2{
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function:ease-in-out;
}

@-webkit-keyframes 'blink' {
    0% { background: rgba(255,0,0,0.5); }
    50% { background: rgba(255,0,0,0); }
    100% { background: rgba(255,0,0,0.5);}
}

.blinksth {
    width: 100px;
    height: 100px;
    -webkit-animation-name: blink;
}



var $animated = $(".animated");
$(".change").on("click",function(){
  $animated.css({
    "webkitAnimationDuration":"10s"
  });
});
$(".paused").on("click",function(){
  $animated.css({
    "webkitAnimationPlayState":"paused"
  });
});
$(".running").on("click",function(){
  $animated.css({
    "webkitAnimationPlayState":"running"
  });
});
$(".change-class").on("click",function(){
  $(".blinksth").removeClass("animated").addClass("animated2");
});

尝试了直接修改时间和切换类名的办法,有什么正确的推荐做法吗

回复
阅读 11.5k
3 个回答
Humphry
  • 16.4k

w3c标准指定了动画运行过程中的行为:

Changing the values of animation properties while the animation is running has no effect on the amount of time that has elapsed since the animation started running i.e. once the animation is running, updates to animation-delay have no effect. The remainder of the animation runs according to the new animation property values.

因此,运行中的动画改变animation timing / keyframe被忽略是符合标准的。

经确认,Chrome 31和Firefox有LZ预期的行为(但背离了标准定义),但chrome 38回归了标准
为了与其他浏览器保持一致,开发者已经打好patch,应该在下一版发布会修正。下一版浏览器的行为将和你的预期保持一致了。


解决方案:还是重新应用动画吧:

http://jsbin.com/caruyetafo/2/edit?css,js,output


最后,jQuery的CSS方法就是能够自动帮你添加前缀的。

同时你应用$animated.css({"webkitAnimationDuration":"10s"});的结果是style="-webkit-animation: 10s;"
不说表现和行为应当分离的问题,你看出来jQuery给你的结果哪里不对了吧?

bf
  • 8k

經測試,似乎只要在修改 -webkit-animation-duration 時移除並重新添加 -webkit-animation-name: blink 即可

莫须有de罪名
  • 2
新手上路,请多包涵

$animated.attr("style":"-webkit-animation-duration:10s!important;");这样可以用

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏