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的答案很受欢迎，但我真的很喜欢vanilla 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

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

这可以提供帮助：

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

通过JavaScript重新启动CSS动画

3 个答案: