Как перезапустить CSS анимацию, используя vanilla JavaScript? - PullRequest
Новая
       3

Как перезапустить CSS анимацию, используя vanilla JavaScript?

1 голос
/ 04 февраля 2020

У меня есть flexbox с 4 изображениями, когда на одном из изображений отображается анимация, но при повторном наведении курсора анимация больше не воспроизводится.

Из того, что я прочитал, я должен перезапустить анимацию, используя JavaScript, но решения, которые я нашел в Интернете, не работают для меня. ID и добавить / удалить класс "textAnim" в JS? Как это сделать при наведении курсора на изображение? 

/* Images Section Styling */

.container-3 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
}

.container-3 img {
  max-width: 100%;
  max-height: 100%;
}

.image {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}


/* Image overlay */

.overlay {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0);
  background-color: rgba(107, 105, 105, 0);
  transition: background-color 1s ease;
  transition: color 1s ease;
  overflow: hidden;
}

.image:hover .overlay {
  background-color: rgba(107, 105, 105, 0.5);
  color: rgba(255, 255, 255, 1);
  transition: background-color 1s ease;
}

.textAnim {
  animation: textAnimation 1s;
  animation-play-state: paused;
  position: relative;
  padding-left: 50%;
  top: 50%;
}

.image:hover .textAnim {
  animation-play-state: running;
}

@keyframes textAnimation {
  0% {
    opacity: 0;
    padding-top: 50%;
  }
  100% {
    opacity: 1;
    padding-top: 0%;
  }
}
<section class="images">
  <div class="container-3">
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animaiton">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
  </div>
</section>

Ответы [ 3 ]

1 голос
/ 04 февраля 2020

В этом случае вам не нужно использовать JS для перезапуска анимации.

Ниже упомянутых изменений достаточно, чтобы анимация продолжалась каждый раз, когда вы наводите курсор на изображение. . 

.image:hover .textAnim {
  animation-play-state: running;
}

Если вы продолжите анимацию только при наведении курсора, вы получите результат.

Обновленный фрагмент выглядит следующим образом - 

/* Images Section Styling */

.container-3 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
}

.container-3 img {
  max-width: 100%;
  max-height: 100%;
}

.image {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}


/* Image overlay */

.overlay {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0);
  background-color: rgba(107, 105, 105, 0);
  transition: background-color 1s ease;
  transition: color 1s ease;
  overflow: hidden;
}

.image:hover .overlay {
  background-color: rgba(107, 105, 105, 0.5);
  color: rgba(255, 255, 255, 1);
  transition: background-color 1s ease;
}

.image:hover .textAnim {
  animation: textAnimation 1s;
  animation-play-state: paused;
  position: relative;
  padding-left: 50%;
  top: 50%;
}

.image:hover .textAnim {
  animation-play-state: running;
}

@keyframes textAnimation {
  0% {
    opacity: 0;
    padding-top: 50%;
  }
  100% {
    opacity: 1;
    padding-top: 0%;
  }
}
<section class="images">
  <div class="container-3">
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animaiton">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
  </div>
</section>
0 голосов
/ 04 февраля 2020 
 but when i hover again the animation is no longer playing

вы хотите бесконечную анимацию, вы можете решить, что

вы пробовали 

animation-iteration-count: number|infinite|initial|inherit;

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation

извините, хотел прокомментировать, но у него не так много представителей

0 голосов
/ 04 февраля 2020

Вы можете запускать и останавливать анимацию CSS, добавляя и удаляя класс textAnim к элементу, который вы хотите анимировать, и от него. Это может быть выполнено с использованием методов добавления и удаления classList через javascript.

Например, если имя элемента равно «animation1», вы можете добавить эти прослушиватели событий, чтобы textAnim класс добавляется во время зависания, но удаляется, когда он не зависает: 

let a1 = document.getElementById("animation1");

a1.addEventListener("mouseover", function()
{
    a1.classList.add("textAnim");
});

a1.addEventListener("mouseout", function()
{
    a1.classList.remove("textAnim");
});

Примечание: Я вижу, что вы используете один и тот же идентификатор (id="animation") несколько раз в одном и том же html документ. Это технически неверно HTML. Вы должны либо назвать каждый идентификатор уникальным образом, либо создать дополнительный класс с именем animation. Да, элементы могут принадлежать нескольким классам (вместо использования идентификатора, подобного классу).

...