通過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到該div：

<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);