Анимация с css, которая меняется при нажатии - PullRequest
Новая
       41

Анимация с css, которая меняется при нажатии

3 голосов
/ 10 июля 2020

Я делаю анимацию для веб-сайта.

Мой клиент хочет строку с некоторыми изображениями.

Эти изображения должны постоянно переводиться при загрузке, но когда я нажимаю на строку , изображения должны ускоряться экспоненциально в течение 4 секунд: после этого веб-сайт должен сменить страницу.

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

Теперь я нашел другое решение, которое использует только css и крючок для изменения класса. Учитывая это новое решение, у меня все еще есть 2 проблемы:

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

Спасибо за ответ 

const row = document.querySelector(".row");
row.addEventListener("click", () => row.classList.add('row-click'));
.row{
  display: flex;
  flex-direction:row;
  overflow: hidden;
}

.cell{
  background:#f00;
  color:#fff;
  font-size:26px;
  min-width:100px;
  margin-right:12px;
  animation: slide-first-desktop 10s linear infinite;
}

.row-click > .cell{
  animation:
    slide-first-desktop 5s cubic-bezier(1,0,.74,1),
    slide-first-desktop 2s linear infinite;
}
@keyframes slide-first-desktop {
  0%{
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-1680px);
  }
}
<div class="row">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
</div>

1 Ответ

1 голос
/ 10 июля 2020

Вместо того, чтобы полагаться на animation-delay для постановки в очередь двух анимаций, вы можете прослушивать события анимации в JavaScript: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event

const animation = document.querySelector('p.animation');

animation.addEventListener('animationstart', () => {
  console.log('animation started');
  animation.classList.add('animation-running');
  // do something
});

animation.addEventListener('animationend', () => {
  console.log('animation ended');
  animation.classList.remove('animation-running');
  // do something
});

В этом примере Я использую события для переключения класса animation-running. Вы можете использовать это, чтобы проверить, запущена ли анимация, и предотвратить ее перезапуск при нажатии.

...