Событие Mouseenter запускается дважды, даже если мышь вышла - PullRequest
Новая
       18

Событие Mouseenter запускается дважды, даже если мышь вышла

0 голосов
/ 19 октября 2019

Я добавляю две анимации встряхивания в div, когда страница загружается и когда в div происходит событие mouseenter

У меня вызывается анимация стыда с разными именами shake1 и shake2, которую я хочу воспроизвести, когда страницазагрузить и снова, когда div завис. Ниже показано, как HTML, CSS и JS выглядят 

let $image = document.querySelector("div");
$image.addEventListener("mouseenter", function() {
  $image.style.animationPlayState = "running";
});
div {
  background: red;
  animation-name: shake1;
  animation-duration: .5s;
}

@keyframes shake1 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

div:hover {
  animation-name: shake2;
  animation-duration: .5s;
}

@keyframes shake2 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
<div style="width:100px; height: 100px;">
</div>

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

1 Ответ

0 голосов
/ 19 октября 2019

Я думаю, что такое поведение вызвано тем фактом, что вы определили две разные анимации для целевого элемента, поэтому, когда вы устанавливаете animationPlayState в «running», он запускает их.

Я обновил ваш код для записи текущего имени анимации: 

let $image = document.querySelector(".shake");

$image.addEventListener("animationstart", function(event) {
  console.log(event.animationName);
})

$image.addEventListener("mouseenter", function(event) {
  $image.style.animationPlayState = "running";
});
div.shake {
  background: red;
  animation-name: shake1;
  animation-duration: .5s;
}

@keyframes shake1 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

div.shake:hover {
  animation-name: shake2;
  animation-duration: .5s;
}

@keyframes shake2 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
<div class="shake" style="width:100px; height: 100px;">
</div>

В качестве обходного пути вы можете установить для animationPlayState значение "paused" при отпускании мыши: 

let $image = document.querySelector("div");
$image.addEventListener("mouseenter", function() {
  $image.style.animationPlayState = "running";
});

$image.addEventListener("mouseleave", function() {
  $image.style.animationPlayState = "paused";
});
div {
  background: red;
  animation-name: shake1;
  animation-duration: .5s;
}

@keyframes shake1 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

div:hover {
  animation-name: shake2;
  animation-duration: .5s;
}

@keyframes shake2 {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
<div style="width:100px; height: 100px;">
</div>
...