每次用戶單擊時如何使用按鈕啟用CSS影片，然后重新開始-有解無憂

我已經知道如何做到這一點只有一次。但我希望當用戶再次點擊它時，影片會重新開始或重新開始。

我有這些：
JS：

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

CSS：

.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;
      }
    }

HTML：

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

所以，如果我點擊它，我怎么能做到這一點，如果它已經在影片，它會重新開始，或者如果它已經結束了，它會重新開始

uj5u.com熱心網友回復：

你需要使用 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')
  }

uj5u.com熱心網友回復：

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

但是您可以在影片完成后重置元素的類。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/379604.html

標籤：javascript html css 动画片按钮

上一篇：為什么我的函式總是回傳未定義？

下一篇：Discordjsbot錯誤我的錯誤是什么？無法讀取未定義的屬性“發送”