Объединение нескольких "переходных концов" EventListener - PullRequest
Новая
       182

Объединение нескольких "переходных концов" EventListener

0 голосов
/ 21 июня 2020
• 1000 от камня к бумаге и, наконец, к ножницам, каждый раз ожидая конца перехода, прежде чем снова менять местами изображение, чтобы имитировать игровое взаимодействие в реальной жизни. Мне удалось связать один из переходов, но я застрял на logi c того, как я бы сделал это для нескольких последовательных "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>

1 Ответ

0 голосов
/ 21 июня 2020

Ожидание завершения перехода, вероятно, вызовет больше проблем, чем оно того стоит. Я не уверен в требованиях к совместимости вашего браузера, но если вы можете использовать анимацию, рекомендую использовать их: 

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', async (e) => {
    let userImg = document.querySelector(".userimg");
    userImg.classList.remove("userimg-animation");
    
    // Force a reflow, see https://css-tricks.com/restart-css-animation/
    userImg.offsetWidth;
    
    userImg.classList.add("userimg-animation");
    userImg.setAttribute("choice", button.id.toLowerCase());
  });
});
.imageHolder {
  position: relative;
  display: inline-block;
}

.spacerimg {
  opacity: 0;
}

.userimg-animation {
  width: 100%;
  height: 100%;
  position: absolute;
  animation-name: rockpaperscissors;
  animation-duration: 1.2s;
}

.userimg {
  background-repeat: no-repeat!important;
}

.userimg[choice="rock"] {
  background: url(https://adiihd.github.io/rock-paper-scissors-game/img/rock.png);
}
.userimg[choice="paper"] {
  background: url(https://adiihd.github.io/rock-paper-scissors-game/img/paper.png);
}
.userimg[choice="scissors"] {
  background: url(https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png);
}

@keyframes rockpaperscissors {
  0% {
    background: url(https://adiihd.github.io/rock-paper-scissors-game/img/rock.png);
  }
  33.2% {
    background: url(https://adiihd.github.io/rock-paper-scissors-game/img/rock.png);
  }
  33.3% {
    background: url(https://adiihd.github.io/rock-paper-scissors-game/img/paper.png);
  }
  66.5% {
    background: url(https://adiihd.github.io/rock-paper-scissors-game/img/paper.png);
  }
  66.6% {
    background: url(https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png);
  }
  99.9% {
    background: url(https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png);
  }
  100% {
    background: none;
  }
}
<div class="imageHolder">
  <div class="userimg"></div>
  <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, и они будут анимировать друг друга.

...