完成javascript css后重复动画答案

【问题标题】：Repeat animation after its done javascript css完成javascript css后重复动画
【发布时间】：2017-07-11 13:44:16
【问题描述】：

我正在制作轮盘游戏，但我遇到了一个问题，即我的“动画”（或您所说的）只能玩一次。我对javascript没有太多经验，也不知道如何解决我的问题。

var img = document.querySelector('#ball');
ball.addEventListener('click', onClick, false);

function onClick() {
  this.removeAttribute('style');
  var deg = 1080;
  var css = '-webkit-transform: rotate(' + deg + 'deg);';
  this.setAttribute(
    'style', css
  );

}

.roulette {
  padding-top: 5em;
  padding-left: 5em;
}
.roulette img {
  position: absolute;
  height: 50em;
}
.ball {
  z-index: 1;
}
.border {
  z-index: 1;
}
#ball {
  -webkit-transition: -webkit-transform 4s ease-out;
  z-index: 1;
}

<h1>Press the ball</h1>
<div class="roulette">
  <img class="border" src="http://www.mediafire.com/convkey/0a20/z78myz6x2nk17n76g.jpg">
  <img id="ball" src="http://www.mediafire.com/convkey/8eec/69mn483g0moovs66g.jpg">
  <img class="wheel" id="spin2" src="http://www.mediafire.com/convkey/937f/f4f65gia76l409u6g.jpg">
</div>

【问题讨论】：

看看使用动画而不是变换：w3schools.com/css/css3_animations.asp

标签： javascript html css animation

【解决方案1】：

您必须在每次运行时更改度数。比如……

var img = document.querySelector('#ball');
    ball.addEventListener('click', onClick, false);
    

    var deg = 0;

    function onClick() {
        this.removeAttribute('style');

        deg += 1080;

        var css = '-webkit-transform: rotate(' + deg + 'deg);';

        this.setAttribute(
            'style', css
        );           
        
    }

.roulette{
  padding-top: 5em;
    padding-left: 5em;
    
}
.roulette img{

    position: absolute;    
    height: 50em;
    

}
.wheel{
    
    
}
.ball{
    z-index: 1;
    
}
.border{
    
    z-index: 1;
}
#ball {
    -webkit-transition: -webkit-transform 4s ease-out;
    z-index: 1;
    
        
}

<h1>Press the ball</h1>
  <div class="roulette">
        <img class="border" src="http://www.mediafire.com/convkey/0a20/z78myz6x2nk17n76g.jpg">
        <img id="ball" src="http://www.mediafire.com/convkey/8eec/69mn483g0moovs66g.jpg">
        <img class="wheel" id="spin2" src="http://www.mediafire.com/convkey/937f/f4f65gia76l409u6g.jpg">

    </div>

或者设置一个超时来确保属性在被添加回来之前被移除：

var img = document.querySelector('#ball');
ball.addEventListener('click', onClick, false);


function onClick() {
  that = this;
  this.removeAttribute('style');

  setTimeout(function() {
    var css = '-webkit-transform: rotate(1080deg);';
    that.setAttribute(
      'style', css
    );
  }, 0);
}

.roulette {
  padding-top: 5em;
  padding-left: 5em;
}

.roulette img {
  position: absolute;
  height: 50em;
}

.wheel {}

.ball {
  z-index: 1;
}

.border {
  z-index: 1;
}

#ball {
  -webkit-transition: -webkit-transform 4s ease-out;
  z-index: 1;
}

<h1>Press the ball</h1>
<div class="roulette">
  <img class="border" src="http://www.mediafire.com/convkey/0a20/z78myz6x2nk17n76g.jpg">
  <img id="ball" src="http://www.mediafire.com/convkey/8eec/69mn483g0moovs66g.jpg">
  <img class="wheel" id="spin2" src="http://www.mediafire.com/convkey/937f/f4f65gia76l409u6g.jpg">

</div>

【讨论】：