javascript - 通过 JavaScript 重启 CSS 动画

Question

我浏览了几篇文章和一堆问题来寻找解决方案，但我一直没能解决这个问题。我试图在单击按钮时重新启动此动画，以便我可以更好地了解如何在我的网络应用程序中处理 css 动画。不幸的是，由于某些代码的所有跨浏览器兼容性问题，这似乎比我最初想象的要难得多。

HTML

<img src="http://s.cdpn.io/79/sprite-steps.png" />
<div class="hi"></div>

<input type = "button" id = "restart" value = "Restart" /> 

JavaScript

var $ = function(id){
    return document.getElementById(id);
}

$("restart").addEventListener("click", function (e){
    $("div").classList.remove("hi");
    $("div").offsetWidth = $("div").offsetWidth;
    $("div").classList.add("hi")
;}, false);

CSS

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");

    -webkit-animation: play .8s steps(10) 1;
       -moz-animation: play .8s steps(10) 1;
        -ms-animation: play .8s steps(10) 1;
         -o-animation: play .8s steps(10) 1;
            animation: play .8s steps(10) 1;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

这是 JSFiddle 链接。我添加了一些内容并将其更改为原来的内容，但始终归功于原始编码员。感谢 JQuery 的回答，但我真的很想用普通的 JavaScript 回答。谢谢!

http://jsfiddle.net/CGmCe/11555/

Answer 1

根据你的函数的返回，return document.getElementById(id); 你的 div 缺少一个 id

<div id="div" class="hi"></div>

http://jsfiddle.net/f2Lb3x5f/