重新运行CSS动画

2016-03-21 本文已影响638人 Eriice

国内关于重新运行CSS动画的资料较少，本文译自Restart CSS Animation并进行扩展，有需要的可以参考，文章如有问题希望能指正。

对于CSS animation（和@keyframes），“重新运行”并不像你想象中那么容易。
　　假如你将它设置成运行一次：<pre>/* CSS /
.run-animation {
-webkit-animation: my-fancy-animation 5s 1;
-moz-animation: my-fancy-animation 5s 1;
animation: my-fancy-animation 5s 1;
}</pre>　　你将它运行在你的logo上：<pre>/ HTML */
<h1 id='logo' class='run-animation'>
Fancy Logo
</h1>
</pre>

方法1：切换class####

在某些情况下你可能想让这段动画再次运行，例如通过一次点击。你可能想CSS会提供一种方式来再次启动它，但据我所知并没有。你也许甚至尝试通过JavaScript（jQuery)来移除并重新添加class name ^注.。<pre>
/* jQuery /
$('#logo').click(function(){
// 不起作用
$(this).removeClass('run-animation').addClass('run-animation');
});</pre>　　~~注：在碰到这个问题时译者我也曾使用上述办法，确实不起作用，后来经改造后，使用toggleClass就解决了，如下：<pre>/ jQuery */
$('#logo').click(function(){
// 起作用了
$(this).toggleClass('run-animation');
//那文章后面还有用么？我也不知道，边看边翻译，希望有惊喜^_
});</pre>~~

方法2：重载元素####

如果你在removeClass和addClass之间设置一个很低的延迟（如setTimeout()），这就起作用（上文toggle就有这个效果），但这不是很理想。真正需要做的是将元素从页面完全移除，然后重新插入它。我们使用jQuery来进行演示，步骤是克隆原始元素，插入到自身之后，移除原始元素。<pre>/* jQuery */
$('#logo').click(function(){
var el = $(this),
newone = el.clone(true);
el.before(newone);
$('.' + el.attr('classs') + 'last').remove();
});
</pre>　　或用最基本的JavaScript：<pre>
var elm = this,
newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
</pre>点击查看演示

方法3：相同动画，不同名字####

同样的问题存在于任何类型的事件中。例如你设置了一个会直接运行的动画，并需要在:hover 时再次运行。同样的问题，它不会再次运行。Oli Studholme对此有些有趣的研究。围绕这个问题的一个方法是通过两个除名字外，其它完全相同的动画，然后你可以切换到那个用于:hover事件（或其它事件），它会起作用。<pre>/* CSS */
img {animation: spin-cat-1 2s;}
img:active {animation: spin-cat-2 2s;}
@keyframes spin-cat-1 {50%{transform:rotateY(180deg);}}
@keyframes spin-cat-2 {50%{transform:rotateY(180deg);}}
</pre>点击查看演示
　　CSS预处理器可以帮助简化维护,通过导入代码块所以你只需要维护一次,但最终y轴代码量增加。不幸的是你也不能在一个声明种定义多个关键帧动画的名字，虽然这是有用的（不单单为了这个，还有更复杂的动画，你可以在基础关键帧动画上重写某些关键帧）。
Oli考虑了各种技术来解决这个问题，如改变altering duration，delays，和iterations来代替改变名字。但在我看来，这些甚至比不上改变名字。

方法4：切换class####

在删除和添加class之间触发一个回流。例如：
<pre>/* JavaScript */
//检索元素
element = document.getElementById("logo");
//重设transition,通过：
element.addEventListener("click", function(e) {
e.preventDefault;
// ->移除class
element.classList.remove("run-animation");
// ->触发回流，真实的魔法！！！...
// 缺少下面这句不会运行。尝试删除这句动画不会被再次触发
element.offsetWidth = element.offsetWidth;

    // ->重新添加class
    element.classList.add("run-animation");

}, false);
</pre>

其他####

以下是记录的相关要点：你也可以影响通过JavaScript改变CSS animation的播放状态，如暂停和重新启动。<pre>element.style.webkitAnimationPlayState="paused";
element.style.webkitAnimationPlayState="running";</pre>　　显然，需要考虑到其他厂商的前缀属性。
　　有趣的是,一般的CSS动画不会设置play-state为“pause”。你必须要自己设置。如果你想每当:hover时重新启动animation，你可以使用jQuery：<pre>$("#thing").hover(function() {
this.style.webkitAnimationPlayState = "running";
$(this).on('webkitAnimationEnd', function() {
this.style.webkitAnimationPlayState = "paused";
});
});
</pre>　　注意：你必须留意应该通过AnimationEnd事件将它设置回“pause”否则它的重启不会像你想的那样。

译者结语####

以上就是关于重新运行CSS动画的全文翻译了，toggleClass的方法是特定场景才能用，来源。以上如有存在纰漏，希望能提出。
　　关于CSS动画的兼容处理与AnimationEnd还有一些非常有用的扩展，但要等找到工作后再总结了。