CSS: полная анимация перед паузой - PullRequest
Новая
       6

CSS: полная анимация перед паузой

0 голосов
/ 29 мая 2018

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

Однако, как бы я ни старался, я нахожу это на удивление трудным для выполнения.Либо элемент останавливается на месте, либо переход в завершенное состояние не является плавным.

  • animation-play-state: paused остановит анимацию на месте, но я хочу, чтобы она сначала завершилась
  • animation: none удаляет анимацию, которая сбрасывает элемент в его положение по умолчанию, но это не плавный переход
  • transition: <stuff>, кажется, плавно не переводит значок в его состояние по умолчанию
  • animation-iteration-count: 1 при наведении на себя ведет себя непоследовательно, иногда делает то, что я хочу, а иногда нет

Как я могу настроить его так, чтобы при наведении курсора на значок анимация сначала заканчивалась перед остановкой?Я чувствую, что упускаю что-то очевидное, но попал в несколько тупиков.

Вот примерный код, который я использую. 

@keyframes bounce {
  0%   { right: 0; }
  10%  { right: 0.5em; }
  20%  { right: 0; }
  30%  { right: 0.5em; }
  40%  { right: 0; }
  100% { right: 0; }
}

.container {
  padding: 2rem;
}

.icon {
  position: relative;
  animation-name: bounce;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

.container:hover .icon {
  animation-play-state: paused;
}
<div class="container">
  <span class="icon">&gt;</span> Some text
</div>

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Как уже упоминалось, я не думаю, что это возможно только в css.Я собрал решение с помощью jQuery.Прыгающая анимация теперь является отдельным классом, который добавляется к значку.В конце анимации (как обнаружено в первой строке bind ()) я удаляю класс и добавляю его снова, только если контейнер не находится над ним (добавление его обратно с помощью setTimeOut снова запустит анимацию).

Если контейнер находится над ним, подпрыгивающий класс больше не добавляется, но вы видите, что другой прослушиватель событий проверяет «mouseout» на контейнере, который добавляет класс обратно.

Вот фрагмент: 

$(".icon").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function() {
    $(this).removeClass("bouncing");
    
    //if hovering, don't repeat
    if ($(".container").is(":hover")) return;
    
    //else, repeat. setTimeout is necessary for animation to take.
    setTimeout(function () {
        $(".icon").addClass("bouncing");
    });
});

$(".container").mouseout(function() {
   $(".icon").addClass("bouncing");
});
@keyframes bounce {
  0%   { right: 0; }
  10%  { right: 0.5em; }
  20%  { right: 0; }
  30%  { right: 0.5em; }
  40%  { right: 0; }
  100% { right: 0; }
}

.container {
  padding: 2rem;
}

.icon {
  position: relative;
}

.bouncing {
  animation-name: bounce;
  animation-duration: 4s;
  animation-iteration-count: 1;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span class="icon bouncing">&gt;</span> Some text
</div>
0 голосов
/ 29 мая 2018

Я думаю, что лучший способ получить то, что вы хотите, это использовать animation-iteration-count: 1; вместо animation-play-state: paused; в состоянии hover, поэтому анимация не будет повторяться. 

@keyframes bounce {
  0%   { right: 0; }
  10%  { right: 0.5em; }
  20%  { right: 0; }
  30%  { right: 0.5em; }
  40%  { right: 0; }
  100% { right: 0; }
}

.container {
  padding: 2rem;
}

.icon {
  position: relative;
  animation-name: bounce;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.container:hover .icon {
  animation-iteration-count: 1;
}
<div class="container">
  <span class="icon">&gt;</span> Some text
</div>
...