Question

有没有办法在不克隆元素的情况下重启CSS动画，重排DOM，等待（setTimeout / onAnimationEnd）？

Answer 1

编辑：不需要jQuery或检查。

我基本上只是在下一个画框重新启动动画。

此方法不会克隆任何元素，重排文档，设置任何超时或等待动画完成。它100％灵活，不需要jQuery。

我还没有看到类似的东西（甚至在css-tricks都没有），所以我想与你分享我的想法并听取你的想法。

Browser support

＆＃13;

document.querySelector('.box').onclick = function(){
  requestAnimation( this );
};

var requestAnimation = function( obj ){
  obj.style.animation = 'none';
  window.requestAnimationFrame(function(){
    obj.style.animation = 'myAnimation 1s';
  });
}

＆＃13;

html{ background: #212121; }

.box{
  width: 150px;
  background: white;
  cursor: pointer;
  text-align: center;
  margin: auto;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 3px black;
}
span{
  float: right;
  color: grey;
}
@keyframes myAnimation{
  from{ background: grey; transform: scale(1.2); }
  to{ background: white; transform: scale(1); }
}

＆＃13;

<div class="box">I can animate forever!</div>
<span>By Luca Rossi</span>

＆＃13;

如何以最小的影响重启CSS动画

1 个答案: