我想使用帶有“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 buttonbuttons.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>