Вы должны заметить, что анимация и переход не одно и то же. Таким образом, обработка событий здесь немного трикси.
Я собираюсь объяснить, что происходит с ними обоими.
Переход:Это просто анимация части изменяющегося свойства элемента.Например, это может быть ширина, высота или цвет.Обычно назначается на :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>