为什么事件“transitionend”会触发两次？

Question

I am practicing my javascript doing the 30days of javascript challenge.我正在练习我的 javascript 做 30 天的 javascript 挑战。

I cannot quite understand why the following code makes the 'transitioned' event fire twice.我不太明白为什么下面的代码使 'transitioned' 事件触发两次。 I only have one property called transform in my css and I am checking it with the e.propertyName conditional inside the function removeTransition.我的 css 中只有一个名为 transform 的属性，我正在使用函数 removeTransition 中的e.propertyName条件检查它。

This line is what it seems to fire twice :这条线似乎是两次触发：

key.addEventListener("transitionend", removeTransition);


      <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>JS Drum Kit</title>
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <div class="keys">
          <div data-key="65" class="key">
            <kbd>A</kbd>
            <span class="sound">clap</span>
          </div>
          <div data-key="83" class="key">
            <kbd>S</kbd>
            <span class="sound">hihat</span>
          </div>
          <div data-key="68" class="key">
            <kbd>D</kbd>
            <span class="sound">kick</span>
          </div>
          <div data-key="70" class="key">
            <kbd>F</kbd>
            <span class="sound">openhat</span>
          </div>
          <div data-key="71" class="key">
            <kbd>G</kbd>
            <span class="sound">boom</span>
          </div>
          <div data-key="72" class="key">
            <kbd>H</kbd>
            <span class="sound">ride</span>
          </div>
          <div data-key="74" class="key">
            <kbd>J</kbd>
            <span class="sound">snare</span>
          </div>
          <div data-key="75" class="key">
            <kbd>K</kbd>
            <span class="sound">tom</span>
          </div>
          <div data-key="76" class="key">
            <kbd>L</kbd>
            <span class="sound">tink</span>
          </div>
        </div>

        <audio data-key="65" src="sounds/clap.wav"></audio>
        <audio data-key="83" src="sounds/hihat.wav"></audio>
        <audio data-key="68" src="sounds/kick.wav"></audio>
        <audio data-key="70" src="sounds/openhat.wav"></audio>
        <audio data-key="71" src="sounds/boom.wav"></audio>
        <audio data-key="72" src="sounds/ride.wav"></audio>
        <audio data-key="74" src="sounds/snare.wav"></audio>
        <audio data-key="75" src="sounds/tom.wav"></audio>
        <audio data-key="76" src="sounds/tink.wav"></audio>

        <script>
          window.addEventListener("keydown", function(e) {
            const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
            const key = document.querySelector(`div[data-key="${e.keyCode}"]`);

            if (!audio || !key) {
              console.log("no key");
              return;
            }

            audio.currentTime = 0;
            audio.play();
            key.classList.add("playing");
            key.addEventListener("transitionend", removeTransition);
          });

          function removeTransition(e) {
            console.log(this);
            if (e.propertyName !== "transform") {
              return;
            }
            e.target.classList.remove("playing");
          }
        </script>
      </body>
    </html>

This is the css file:

html {
  font-size: 10px;
  background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
  background-size: cover;
}
body,
html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.key {
  border: 0.4rem solid black;
  border-radius: 0.5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem 0.5rem;
  transition: all 0.07s ease;
  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 0.5rem black;
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block;
  font-size: 4rem;
}

.sound {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: #ffc600;
}

Thanks in advance for your help.在此先感谢您的帮助。

PS I have solved the issue by moving the transitionend event outside the keypressed event but I would like to understand why it is not working this way. PS 我已经通过将 transitionend 事件移到 keypressed 事件之外解决了这个问题，但我想了解为什么它不能以这种方式工作。

Andrea安德烈亚

Answer 1

Your transactionend event has associated with transition style of "key" class.您的 transactionend 事件与“key”类的转换样式相关联。 Which reacts by adding one more class "playing".它通过添加一个“播放”类来做出反应。 It fired when you add playing class and again when you remove it.它在您添加播放类时触发，并在您删除它时再次触发。 Also you use "All" in your transition style which call this event multiple of style attribute change.您还可以在过渡样式中使用“全部”，它将此事件称为样式属性更改的倍数。

Solution : I think it is not feasible with transactionend event.解决方案：我认为使用 transactionend 事件是不可行的。 Because it fires ones when it done transition and once more when back to original.因为它在完成转换时会触发，当回到原始状态时会再次触发。 Try some different logic or clarify.尝试一些不同的逻辑或澄清。

Hint : It is better to use "setTimeout" function to remove "playing" class after transition time elapse.提示：最好使用“setTimeout”函数在过渡时间过后移除“playing”类。

为什么事件“transitionend”会触发两次？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-12-13 19:17:59

为什么事件“transitionend”会触发两次？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-12-13 19:17:59

解决方案1
0 已采纳 2019-12-13 19:17:59