通过JavaScript重新启动CSS动画

Question

I went through a couple of articles and stack questions for a solution, but I haven't been able to get this working. I'm trying to restart this animation upon button click so I can get a better idea of how to approach css animation in my web app. Unfortunately, it seems a lot harder than I initially thought it be with all the cross browser compatibility issues with some code.

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

This is the JSFiddle link. I added and changed some stuff to what it originally had, but credits out to the original coder(s) always. JQuery answers are appreciated, but I would really like an answer in vanilla JavaScript. Thanks!

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

Answer 1

Based on the return of your function, return document.getElementById(id); your div is missing an id

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

http://jsfiddle.net/f2Lb3x5f/

Answer 2

Vanilla 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

this can help:

your html with addtion of id to that 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);