单击时如何停止动画并将其返回到第一帧？-解网

问：

我有一个这样的css：

#turbo_fire {
  transform-box: fill-box;
  position: absolute;
  animation-name: burning;
  animation-duration: .005s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center center;
}
.burning-pause {
  animation-play-state: paused;
}
.burning-run {
  animation-play-state: running;
}

我还有我的 JS 代码，可以监听事件并在和类之间切换。ckick.burning-pause.burning-run

prop 只有两种状态，例如和。所以它没有任何停止动画值。animation-play-statepauserunning

那么问题来了，当动画停止并返回到第一帧时，如何停止动画呢？click

css css 动画

const btn = 
  { Xanim  : document.querySelector('#btn-anim')
  , Xpause : document.querySelector('#btn-pause')
  , Xrun   : document.querySelector('#btn-run')
  , Xreset : document.querySelector('#btn-reset')
  }

setBtnsOff( false,true,true,true );

btn.Xanim.onclick =_=> 
  { 
  bob.classList.add('anim');
  setBtnsOff( true,false,true,false );
  }
btn.Xpause.onclick =_=>
  {
  bob.classList.remove('movin-run'); 
  bob.classList.add('movin-pause');
  setBtnsOff(true,true,false,false);
  }
btn.Xrun.onclick =_=>
  {
  bob.classList.replace('movin-pause','movin-run'); 
  setBtnsOff(true,false,true,false);
  }
btn.Xreset.onclick =_=>
  {
  bob.classList.remove('anim','movin-pause','movin-run');
  setBtnsOff( false,true,true,true );
  }
 
function setBtnsOff( x_anim, x_pause, x_run, x_reset  )
  {
  btn.Xanim .disabled = x_anim;
  btn.Xpause.disabled = x_pause;
  btn.Xrun  .disabled = x_run;
  btn.Xreset.disabled = x_reset;
  }

#bob {
  margin  : 20px;
  width         : 100px;
  height        : 100px;
  background    : darkorange;
  border-radius : 50px;
  }
.anim {
  animation-name            : movin;
  animation-duration        : 2s;
  animation-timing-function : linear;
  animation-iteration-count : infinite;
  }
@keyframes movin {
    0% { transform: translateX(0); }
   50% { transform: translateX(300px); }
  100% { transform: translateX(0); }
  }

.movin-pause {
  animation-play-state: paused;
  }
.movin-run {
  animation-play-state: running;
  }

button { width : 5em; }

<button id="btn-anim"  > mov it </button>
<button id="btn-pause" > pause  </button>
<button id="btn-run"   > run    </button>
<button id="btn-reset" > reset  </button>

<div id="bob"></div>

单击时如何停止动画并将其返回到第一帧？

How to stop animation when click and return it to the 1st frame?

评论

评论