JS, изменить свойство стилей div блока

Question

Доброго времени суток.

Есть несколько элементов со своими стилями, выглядит следующим образом.

<div style="position: absolute; transition: all 1s linear 0s; transform: rotate(157.5deg) translate(15em) rotate(-158deg);"> ... </div>

<div style="position: absolute; transition: all 1s linear 0s; transform: rotate(134.5deg) translate(15em) rotate(-134deg);"> ... </div>

У всех div элементов разное свойство transform (в целом все div элементы образуют круг, из больше двух).

Задача следующая, необходимо изначальное свойство transform rotate установить на 0, а после через JS "дойти" до нужного значения, это нужно, чтобы элементы появлялись не сразу на своем месте, а выезжали из определенного места. Как можно через JS изменить rotate? Возможно с добавлением ID к каждому блоку.

Важное добавление, я могу изменить стиль через document.getElementById('ID').style.transform = 'rotate(337.5deg) translate(15em) rotate(-337deg)' Но в таком случаи анимацию не будет происходить.

Answer 1

Задача следующая, необходимо изначальное свойство transform rotate установить на 0, а после через JS "дойти" до нужного значения

А используя классы нельзя? при условии если все значения знаете за ранее. Например так

let arr = ['a', 'aa', 'aaa']
btn.addEventListener('click', function() {
  document.querySelectorAll('.b').forEach((el, i) => {
    el.classList.add(arr[i]);
  })
})

.b {
  position: absolute;
  transition: all 1s linear 1s;
  left: 500px;
  border: 2px solid red;
  transform: rotate(0deg) translate(0em) rotate(0deg);
}

.a {
  transform: rotate(157.5deg) translate(15em) rotate(-158deg);
  transition: all 1s linear 1s;
}

.aa {
  transform: rotate(134.5deg) translate(15em) rotate(-134deg);
  transition: all 1s linear 1.5s;
}

.aaa {
  transform: rotate(111.5deg) translate(15em) rotate(-110deg);
  transition: all 1s linear 2s;
}

<div class="b" style=""> 1111111111111</div>
<div class="b" style="">1111111111111</div>
<div class="b" style=""> 1111111111111</div>

<button id="btn">Вжух</button>

БЛОГ НА HUSL

JS, изменить свойство стилей div блока

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