LenovoId
@LenovoId
I want, women not to get sick

Как присвоить class поочерёдно к неизвестному количеству элементов?

Имеется некая фигура в SVG с огромным количеством эллипсов.
Они имеют class="st0" и их 493 штуки
Я знаю количество но не всегда.
Я хочу поочерёдно не зная количество элементов присвоить им class но по времени..скажем с периодичностью в 0.4s .
В этом class прописана анимация.
Цель: анимированно показать все элементы что создаст некий эффект рисования этой фигуры

Каким образом это сделать ?
Вот собственно пример: https://codepen.io/topicstarter/pen/ZwyKzr
  • Вопрос задан
  • 141 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Вариант попроще - таймауты устанавливаются одновременно всем элементам, длительность таймаута зависит от индекса элемента:

let state = true;

document.querySelector('button').addEventListener('click', e => {
  state = !state;

  document.querySelectorAll('circle').forEach((n, i, a) => {
    setTimeout(() => {
      n.classList.toggle('st0', state);
      e.target.disabled = (state ? a.length - i : i + 1) !== a.length;
    }, (state ? a.length - i : i) * 3);
  });
});

Но, наверное, устанавливать столько таймаутов сразу не круто, так что вот вариант посложнее - таймауты устанавливаются поочерёдно, следующий в коллбеке предыдущего, ну а длительность у всех таймаутов одинакова:

let state = true;
const button = document.querySelector('button');
const circles = document.querySelectorAll('circle');

button.addEventListener('click', () => {
  state = !state;
  toggleCircle(0);
});

function toggleCircle(i) {
  if (i < circles.length) {
    setTimeout(() => {
      const index = state ? circles.length - i - 1 : i;
      circles[index].classList.toggle('st0', state);
      button.disabled = i !== circles.length - 1;
      toggleCircle(i + 1);
    }, 3);
  }
}

Ну или можно вместо таймаутов устанавливать интервал:

let state = true;
const circles = document.querySelectorAll('circle');

document.querySelector('button').addEventListener('click', function() {
  this.disabled = true;
  state = !state;

  let i = 0;
  const intervalID = setInterval(() => {
    const index = state ? circles.length - i - 1 : i;
    circles[index].classList.toggle('st0', state);
    if (++i === circles.length) {
      this.disabled = false;
      clearInterval(intervalID);
    }
  }, 3);
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
danial72
@danial72
flutter dart.
Var I = 1
$(".вашкласс").each(funcion(){
setTimeout(function(){
$(this).addClass("newclass"))
},i*400)
I = I +1
})
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы