每次用户单击时如何使用按钮启用CSS动画然后重新开始

Posted 2023-03-06

【中文标题】每次用户单击时如何使用按钮启用CSS动画然后重新开始

【英文标题】：How to enable CSS animation with a button everytime when the user clicks on then it starts over

【发布时间】：2022-01-16 12:03:32

【问题描述】：

我已经知道如何做到这一点只有一次。但我希望当用户再次点击它时，动画会重新开始或重新开始。

我有这个：

function animation() 
  document.getElementById('ExampleButton').className = 'Animation';

.ExampleButtonCSS 
  position: fixed;
  bottom: 113px;
  background: rgba(0, 0, 0, 0);
  color: #cfcfcf;
  width: 100%;
  padding-left: 20px;


#ExampleButton 
  cursor: pointer;
  font-size: 15px;
  outline-color: #000;
  outline-style: auto;
  outline-width: 2px;
  padding: 5px;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: #cfcfcf;
  opacity: 0;


.Animation 
  opacity: 0;
  animation: inactivity 5s ease normal;


@keyframes inactivity 
  from 
    opacity: 0;
  
  10% 
    opacity: 1;
  
  90% 
    opacity: 1;
  
  to 
    opacity: 0;
  

<div class="ExampleButtonCSS">
  <button id="ExampleButton" onclick="animation()">Fade in and Out</button>
</div>

那么，如果我点击它，我该怎么做

【参考方案1】：

你需要使用animationend event

<div class="ExampleButtonCSS">
  <button id="ExampleButton"> Fade in and Out </button>
</div>

const explmButton = document.getElementById('ExampleButton')

explmButton.onclick = () =>
  
  explmButton.classList.add('Animation')
  
explmButton.onanimationend = () =>
  
  explmButton.classList.remove('Animation')
  

【讨论】：

谢谢！就是这个！你能告诉我，如果我想要 onkeydown 而不是 onclick 我该如何编码。就像，如果用户按下回车键然后它开始动画？谢谢！

@hoaaiww 就是explmButton.onkeydown = (event) =>

请注意 animationend 仅在动画成功完成时触发，如果中止它不会触发，您可能还想监听 animationcancel，或使用 Web Animations API 的 @改为 987654329@。

【参考方案2】：

我不完全明白你想要什么。

但您可以在动画完成后重置元素的类。

function animation() 
  document.getElementById('ExampleButton').className = '';
  document.getElementById('ExampleButton').className = 'Animation';
  setTimeout(() => 
    document.getElementById('ExampleButton').className = '';
  , 5000)

.ExampleButtonCSS 
  position: fixed;
  bottom: 113px;
  background: rgba(0, 0, 0, 0);
  color: #cfcfcf;
  width: 100%;
  padding-left: 20px;


#ExampleButton 
  cursor: pointer;
  font-size: 15px;
  outline-color: #000;
  outline-style: auto;
  outline-width: 2px;
  padding: 5px;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: #cfcfcf;


.Animation 
  opacity: 0;
  animation: inactivity 5s ease normal;


@keyframes inactivity 
  from 
    opacity: 0;
  
  10% 
    opacity: 1;
  
  90% 
    opacity: 1;
  
  to 
    opacity: 0;
  

<div class="ExampleButtonCSS">
  <button id="ExampleButton" onclick="animation()">Fade in and Out</button>
</div>