Блог

Главная - Вопросы по программированию - Добавление задержки к задержкам динамической анимации в Javascript

Добавление задержки к задержкам динамической анимации в Javascript

#javascript

#javascript

Вопрос:

Я пытаюсь изменить задержки анимации в серии текстов абзацев, где фактические задержки варьируются между каждым абзацем.

Я пробовал ниже, но он не применяет 5-секундную задержку.

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

 var i;
var x = document.getElementsByTagName("p");
var propval = window.getComputedStyle(x, null).getPropertyValue("animation-delay");
for (i = 0; i < x.length; i  ) {
  x[i].style.animationDelay = propval   "5s";
}

Комментарии:

1. 10 "5s" == "105s" . … Так что это не арифметика. Кроме этого, я не знаю, получит ли остальная часть вашего кода желаемый результат в любом случае.

Ответ №1:

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

Вы переходите x к getComputedStyle тому, который ожидает элемент. Но x это HTMLCollection .

Затем вам нужно правильно проанализировать текущую задержку и увеличить ее значение.

Что-то вроде

 var i;
var x = document.getElementsByTagName("p");
for (i = 0; i < x.length; i  ) {
  var propval = window.getComputedStyle(x[i], null).getPropertyValue("animation-delay");
  var numericPropVal = parseInt(propval,10)
  x[i].style.animationDelay = `${numericPropVal   5}s`
} 
 p {
  animation: slide 2s;
}

@keyframes slide {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(200px, 0);
  }
} 
 <p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>