通过JavaScript重新启动CSS动画

Question

我经历了几篇文章，并为解决方案堆砌了问题，但是我一直无法得到这个工作。我试图在点击按钮后重新启动此动画，以便我可以更好地了解如何在我的Web应用程序中实现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/

Answer 2

香草的Javascript：

function hasClass(element, myClass) { 
    return !!element.className.match(new RegExp('(\\s|^)'+myClass+'(\\s|$)')); 
} 

function addClass(element, myClass) { 
    if (!hasClass(element , myClass)) element.className += " "+myClass; 
} 

function removeClass(element,myClass) { 
    if (hasClass(element, myClass)) { 
    var reg = new RegExp('(\\s|^)'+myClass+'(\\s|$)'); 
    element.className=element.className.replace(reg,''); 
    } 
} 

Answer 3

这可以帮助：

您的HTML与ID的addtion到该分区：

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

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

的javascript：

element = document.getElementById("restart"); 
element1 = document.getElementById("animate"); 

// reset the transition by... 
element.addEventListener("click", function(e) { 
    e.preventDefault; 

    // -> removing the class 
    element1.classList.remove("hi"); 

    // -> triggering reflow /* The actual magic */ 
    // without this it wouldn't work. Try uncommenting the line and the transition won't be retriggered. 
    element1.offsetWidth = element1.offsetWidth; 

    // -> and re-adding the class 
    element1.classList.add("hi"); 
}, false);