链接多个“transitionend”事件监听器

Question

我想使用带有“transitionend”的 EventListenner 链接多个图像，例如我有一个石头剪刀布游戏，每次单击其中一个按钮播放时，我希望图像从石头旋转，到纸，最后到剪刀，每次都等待过渡结束，然后再次交换图像，模拟现实生活中的游戏交互。我已经设法链接其中一个转换，但我坚持如何为多个连续"transitionend"事件执行此操作的逻辑

let images = ['https://adiihd.github.io/rock-paper-scissors-game/img/rock.png', 'https://adiihd.github.io/rock-paper-scissors-game/img/paper.png', 'https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png'];

const buttons = document.querySelectorAll('button');

// we use the .forEach method to iterate through each button

buttons.forEach((button) => {

  // and for each one we add a 'click' listener

  button.addEventListener('click', (e) => {

    let userImg = document.querySelector("#userimg");

    userImg.classList.add("playing");

    userImg.addEventListener('transitionend', () => {

      userImg.classList.remove("playing");

      userImg.setAttribute('src', images[1]);

    });

    userImg.addEventListener('transitionend', () => {

      userImg.classList.remove("playing");

      userImg.setAttribute('src', images[2]);

    });

  });

});

#userimg {

  transition: all 0.4s ease;

  width: 200px;

}

.playing {

  transform: rotate(30deg);

}

<img id="userimg" src="https://adiihd.github.io/rock-paper-scissors-game/img/rock.png">

<br>

<button id="Rock">Rock</button>

<button id="Paper">Paper</button>

<button id="Scissors">Scissors</button>

Answer 1

等待 transitionend 可能会导致更多的问题而不是它的价值。我不确定您的浏览器兼容性要求，但如果您可以使用动画，我建议您使用它们：let images = ['https://adiihd.github.io/rock-paper-scissors-game/img/rock.png', 'https://adiihd.github.io/rock-paper-scissors-game/img/paper.png', 'https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png'];const buttons = document.querySelectorAll('button');// we use the .forEach method to iterate through each buttonbuttons.forEach((button) => {&nbsp; // and for each one we add a 'click' listener&nbsp; button.addEventListener('click', async (e) => {&nbsp; &nbsp; let userImg = document.querySelector(".userimg");&nbsp; &nbsp; userImg.classList.remove("userimg-animation");&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Force a reflow, see https://css-tricks.com/restart-css-animation/&nbsp; &nbsp; userImg.offsetWidth;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; userImg.classList.add("userimg-animation");&nbsp; &nbsp; userImg.setAttribute("choice", button.id.toLowerCase());&nbsp; });});.imageHolder {&nbsp; position: relative;&nbsp; display: inline-block;}.spacerimg {&nbsp; opacity: 0;}.userimg-animation {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; position: absolute;&nbsp; animation-name: rockpaperscissors;&nbsp; animation-duration: 1.2s;}.userimg {&nbsp; background-repeat: no-repeat!important;}.userimg[choice="rock"] {&nbsp; background: url(https://adiihd.github.io/rock-paper-scissors-game/img/rock.png);}.userimg[choice="paper"] {&nbsp; background: url(https://adiihd.github.io/rock-paper-scissors-game/img/paper.png);}.userimg[choice="scissors"] {&nbsp; background: url(https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png);}@keyframes rockpaperscissors {&nbsp; 0% {&nbsp; &nbsp; background: url(https://adiihd.github.io/rock-paper-scissors-game/img/rock.png);&nbsp; }&nbsp; 33.2% {&nbsp; &nbsp; background: url(https://adiihd.github.io/rock-paper-scissors-game/img/rock.png);&nbsp; }&nbsp; 33.3% {&nbsp; &nbsp; background: url(https://adiihd.github.io/rock-paper-scissors-game/img/paper.png);&nbsp; }&nbsp; 66.5% {&nbsp; &nbsp; background: url(https://adiihd.github.io/rock-paper-scissors-game/img/paper.png);&nbsp; }&nbsp; 66.6% {&nbsp; &nbsp; background: url(https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png);&nbsp; }&nbsp; 99.9% {&nbsp; &nbsp; background: url(https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; background: none;&nbsp; }}<div class="imageHolder">&nbsp; <div class="userimg"></div>&nbsp; <img class="spacerimg" src="https://adiihd.github.io/rock-paper-scissors-game/img/rock.png"></div><br><button id="Rock">Rock</button><button id="Paper">Paper</button><button id="Scissors">Scissors</button>注意：我必须编写额外的关键帧以防止背景之间的动画（它们在彼此之间淡出）。但是您可能需要动画，因此如果您删除每个奇数关键帧，您将拥有更少的 CSS 并且它们将在彼此之间进行动画处理。