Переход класса с одного блока на другой

Question

Всем привет. У меня есть 3 дива и класс к нему .color, нужно что бы этот класс переходил на другие дивы с классом .block по очереди а с предыдущего исчезал, и сделать когда он дойдет до последнего дива то возвращался к первому, переход должен происходить через 2 секунды. Это наверное делается только по js и я в нем не понимаю и прошу помощи :)

.block {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.color {
  background-color: orange;
  color: #fff;
}

<div class="block color">01</div>
<div class="block">02</div>
<div class="block">03</div>

Answer 1

Вот моё вариант

const block = document.querySelectorAll('.block');

function testFunction() {
  for (let i = 0; i < block.length; i++) {
    if (block[i].classList.contains('color')) {
      block[i].classList.remove('color');
      if (i == block.length - 1) block[0].classList.add('color');
      else block[i + 1].classList.add('color');
      break;
    }
  }
}
setInterval(testFunction, 2000); // 2 секунды = 2000 миллисекунды

.block {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.color {
  background-color: orange;
  color: #fff;
}

<div class="block color">01</div>
<div class="block">02</div>
<div class="block">03</div>

Упрощенный метод, наверное ^-^

const block = document.querySelectorAll('.block');

function testFunction() {
  let color = document.querySelector('.block.color');
  let nextBlock = color.nextElementSibling != null ? color.nextElementSibling : block[0];

  color.classList.remove('color');
  nextBlock.classList.add('color');
}

setInterval(testFunction, 2000); // 2 секунды = 2000 миллисекунды

.block {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.color {
  background-color: orange;
  color: #fff;
}

<div>
  <div class="block color">01</div>
  <div class="block">02</div>
  <div class="block">03</div>
</div>

Answer 2

Да, это делается через JS. Нужно найти текущий див, следующий див, у текущего убрать класс, следующему класс добавить. И повторять раз в 2 секунды. Например, вот так.

// Вспомогательная функция, находит следующий элемент по текущему
function getNextElement (elements, currentElement) {
  let nextElement = currentElement.nextElementSibling;
  if (!elements.includes(nextElement)) nextElement = elements[0];
  return nextElement;
}

// Вспомогательная функция, убирает/добавляет класс у двух элементов
function toggleClass (element, nextElement, elementClassToToggle) {
  element.classList.remove(elementClassToToggle);
  nextElement.classList.add(elementClassToToggle);
}

// Основная функция, хранит элементы и запускает цикл переключения
function enableAnimation (elementClass, elementClassToToggle, interval) {
  // Находим все нужные элементы
  let currentElement = document.querySelector(`.${elementClass}.${elementClassToToggle}`);
  const parent = currentElement.parentElement;
  const elements = Array.from( parent.querySelectorAll(`.${elementClass}`) );
  let nextElement = getNextElement(elements, currentElement);

  // Цикл переключения
  setTimeout( function f() {
    toggleClass(currentElement, nextElement, elementClassToToggle);
    currentElement = nextElement;
    nextElement = getNextElement(elements, currentElement);
    setTimeout(f, interval);
    
  }, interval);
}

// Запуск основной функции
enableAnimation ('block', 'color', 2000);

.block {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
.color {
  background-color: orange;
  color: #fff;
}

<div class="block color">01</div>
<div class="block">02</div>
<div class="block">03</div>

БЛОГ НА HUSL

Переход класса с одного блока на другой

Ответы (2 шт):