完成javascript css后重复动画

发布时间：2020-12-14 22:38:38 所属栏目：资源来源：网络整理

导读：我正在制作轮盘赌游戏,但我遇到了一个问题,即我的“动画”(或你所说的)只能玩一次.我没有这么多javascript的经验,也不知道如何解决我的问题. var img = document.querySelector('#ball'); ball.addEventListener('click',onClick,false); function onClick()

我正在制作轮盘赌游戏,但我遇到了一个问题,即我的“动画”(或你所说的)只能玩一次.我没有这么多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;
    

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


最佳答案
您必须在每次运行时更改度数.如…

var img = document.querySelector('#ball');
    ball.addEventListener('click',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;
    
        
}

或者设置超时以确保在添加属性之前删除该属性：

var img = document.querySelector('#ball');
ball.addEventListener('click',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;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!