Удалить класс, добавленный при наведении курсора и анимации при наведении мыши

Question

Я попробовал transitionend и animationend изменить мой CSS после окончания анимации transition или keyframes.Я сделал пример с обоими вариантами, и они работали как ожидалось: я могу toggle a class, когда transition или анимация заканчивается.При наведении курсора я запускаю переход / анимацию и в JavaScript переключаю класс, который меняет background-color после изменения перехода / анимации.

Единственное отличие состоит в том, что при наведении мышии div возвращается в исходное состояние, с transition и transitionend, класс будет удален, а исходный background-color будет видимым.Для keyframes анимаций и animationend класс и background-color остаются, также когда я делаю мышку.Как я могу получить такое же поведение для animationend, как transition?

var boxTransition = document.getElementById("transition");
var boxAnimation = document.getElementById("animation");

/* add class after transition ends */
boxTransition.addEventListener("transitionend", changeBackground);

/* add class after keyframes animation ends */
boxAnimation.addEventListener("animationend", changeBackground);

function changeBackground() {
  this.classList.toggle("box--end");
}

.box {
  height: 100px;
  margin-bottom: 30px;
  width: 100px;
}

.box--transition {
  background-color: lightcoral;
  transition: width 0.5s ease-in-out;
}

.box--transition:hover {
  width: 300px;
}

.box--animation {
  background-color: lightblue;
}

.box--animation:hover {
  animation: animateWidth 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

.box--end {
  background-color: gray;
}

@keyframes animateWidth {
  from {
    width: 100px;
  }
  to {
    width: 300px;
  }
}

<div id="transition" class="box box--transition"></div>
<div id="animation" class="box box--animation"></div>

Answer 1

Я вижу 2 варианта для вас.Сначала нужно позвонить changeBackground на boxAnimation.onMouseOut():

boxAnimation.addEventListener("mouseout", changeBackground);

Это немедленно изменит фон.Второе - установить анимацию для .box--animation без наведения:

@keyframes animateWidth2 {
  from {
    width: 300px;
  }
  to {
    width: 100px;
  }
}
.box--animation {
  animation: animateWidth2 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

Это будет работать как переход, но также произойдет и при запуске.Чтобы предотвратить это, вы можете добавить .box--hovered класс к .box в changeBackground() и добавить анимацию к .box--animation.box--hovered вместо просто .box--animation. Пример для второго варианта.

Answer 2

Вы должны заметить, что анимация и переход не одно и то же. Таким образом, обработка событий здесь немного трикси.

Я собираюсь объяснить, что происходит с ними обоими.

Переход:Это просто анимация части изменяющегося свойства элемента.Например, это может быть ширина, высота или цвет.Обычно назначается на :hover.Таким образом, он не ожидает анимации, если пользователь вынимает мышь из элемента до завершения перехода.

С другой стороны,

Анимация: представляет собой полный набор перехода и выполняетне волнует пользовательское событие mouseout, когда оно начинается, оно заканчивается само по себе.

Итак, вот что вы можете сделать.Поскольку вы установили переключатель на transitionend, это нормально, потому что всякий раз, когда пользователь вынимает мышь, происходит переход, а затем происходит событие, но для анимации вы должны явно позаботиться о них.

То, что я сделал, это, (при условии, что пользователь будет удерживать мышь на элементе в течение нескольких секунд) добавил класс после завершения анимации (например, transitionend), а затем удалил класс, как только пользователь уберет мышь из элемента.

Не совсем это то, что вы должны делать, но теперь вы можете получить представление о том, что и когда делать.

Демонстрация:

var boxTransition = document.getElementById("transition");
var boxAnimation = document.getElementById("animation");

/* add class after transition ends */
boxTransition.addEventListener("transitionend", changeBackground);

/* add class after keyframes animation ends */
boxAnimation.addEventListener("animationend", greyOnStart);
boxAnimation.addEventListener("mouseout", revertOnEnd);

function changeBackground() {
  this.classList.toggle("box--end");
}

function greyOnStart(){
  this.classList.add('box--end');
}

function revertOnEnd(){
  this.classList.remove('box--end');
}

.box {
  height: 100px;
  margin-bottom: 30px;
  width: 100px;
}

.box--transition {
  background-color: lightcoral;
  transition: width 0.5s ease-in-out;
}

.box--transition:hover {
  width: 300px;
}

.box--animation {
  background-color: lightblue;
}

.box--animation:hover {
  animation: animateWidth 0.5s ease-in-out;
  animation-fill-mode: forwards;
}

.box--end {
  background-color: gray;
}

@keyframes animateWidth {
  from {
    width: 100px;
  }
  to {
    width: 300px;
  }
}

<div id="transition" class="box box--transition"></div>
<div id="animation" class="box box--animation"></div>