Я пытаюсь сделать анимацию клипа по центру мыши, но работает только один раз; ( - PullRequest
Новая
       86

Я пытаюсь сделать анимацию клипа по центру мыши, но работает только один раз; (

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

все;)

Как объясняется в заголовке, моя анимация работает нормально, но только один раз. Я хочу, чтобы изображение было выше при наведении курсора и возвращалось в нормальное состояние при наведении курсора. В первый раз он работает так, как ожидалось, но когда я во второй раз вхожу в div, функция анимации больше не работает. Так что, очевидно, я делаю что-то не так ...

Спасибо за вашу бесценную помощь в ответе на мой вопрос о новичках.

Вот мой код: 

var box = document.querySelector('.box');

function myEnterEndFunction() {
  box.classList.remove('enter-animation');
  box.classList.add('survol');
}

function myLeaveEndFunction() {
  box.classList.remove('leave-animation');
  box.classList.add('normal');
}

function myEnterFunction() {
  box.classList.remove('normal');
  box.classList.add('enter-animation');
  box.addEventListener("webkitAnimationEnd", myEnterEndFunction);
}

function myLeaveFunction() {
  box.classList.remove('survol');
  box.classList.add('leave-animation');
  box.addEventListener("webkitAnimationEnd", myLeaveEndFunction);
}

box.addEventListener('mouseenter', myEnterFunction);
box.addEventListener('mouseleave', myLeaveFunction);
body {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.box {
  background: orange;
  width: 640px;
  height: 480px;
}

.enter-animation {
  animation: box-enter 1s;
}

.leave-animation {
  animation: box-leave 1s;
}

.survol {
  clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
}

.normal {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@keyframes box-enter {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
  }
}

@keyframes box-leave {
  0% {
    clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
<div class="box normal"><img src="https://via.placeholder.com/640x480.png"></div>
...