CSS переход в исходное состояние после отпускания мыши - PullRequest
Новая
       8

CSS переход в исходное состояние после отпускания мыши

0 голосов
/ 03 ноября 2018

РЕДАКТИРОВАТЬ: Это не то же самое, что этот пост, Как отменить анимацию при наведении мыши после наведения . Разница в том, что в этом случае состояние перехода (как далеко оно продвинулось) существенно в отличие от вышеупомянутого поста, который полностью игнорирует его.

TL; DR: Как анимировать / перевести элемент обратно в исходное состояние после завершения анимации?

Hello

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

Сильно упрощенная версия этого может быть найдена во фрагменте, доступном ниже. 

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  background-color: red;
}

div:hover {
  animation: float 2s infinite ease;
}

@keyframes float {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: translateY(-20px);
  }
}
<html>
  <head>
    <title>animate to orignal position</title>
  </head>
  <body>
    <div id='box'></div>
  </body>
</html>

Как вы можете видеть, плавание запускает плавную анимацию, которая напоминает плавающее движение, однако она внезапно прерывается, когда мышь покидает поле, и анимация останавливается.

Итак, мой вопрос: есть ли способ разрешить коробке вернуться в исходное состояние, желательно без использования JavaScript (хотя все предложения приветствуются).

(На этот вопрос, вероятно, ответили где-то в Интернете, и если это так, то мне очень жаль, но я не смог найти правильного решения моей проблемы. Пожалуйста, добавьте дубликат, если вы найдете подходящее решение. )

Спасибо.

1 Ответ

0 голосов
/ 03 ноября 2018

Вам нужно будет использовать переходы JavaScript и CSS: 

var box = document.getElementById('box')
var timer

box.addEventListener('mouseenter', function () {
  box.classList.add('up')
  timer = setInterval(function () {
    box.classList.toggle('up')
  }, 1000)
})

box.addEventListener('mouseleave', function () {
  clearInterval(timer)
  box.classList.remove('up')
})
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  background-color: red;
  transition: transform 1s ease;
}

div.up {
  transform: translateY(-20px);
}
<html>
  <head>
    <title>animate to orignal position</title>
  </head>
  <body>
    <div id='box'></div>
  </body>
</html>
...