Помогите плиз дописать код. Не получается добавить transition

Question

Разделил каждую букву при помощи js. И теперь хочу что бы каждая буква при помощи transition плавно анимировалась. Не могу вставить transition: 3s; вот в эту часть кода return "<div class=repa style = transform:rotate("+ i * 24.2 +"deg)>"+ elem +""

let word = document.querySelector('.word');
let words = document.querySelector('.words');


anim();


function anim() {
word.innerHTML = word.innerHTML.split("").map(function(elem, i) {
  return "<div class=repa style = transform:rotate("+ i * 24.2 +"deg)>"+ elem +"</div>"  
})
.join("");

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.words {
  width: 100%;
  position: relative;
  height: 1600px;
}

.word {
      margin: 158px;
      font-size: 33px;
      transition: 2s;
}


.repa {
     position: absolute;
    left: 50%;
    font-size: 1.2em;
    text-transform: uppercase;
    transform-origin: 0 100px;
}

<div class="words">
           <p class="word" style="transform: rotate(0deg);">Ruslan</p>
       </div>

Answer 1

Свойство transition (переход) срабатывает, когда происходит какое-нибудь событие с теми элементами которым оно назначено. Например, наведение курсора или добавление/удаление класса. У Вас в коде не происходит никаких событий, только добавление элементов.

Думаю, что Вам больше подойдёт свойство animation:

let words = document.querySelector('.words');
let word = words.querySelector('.word');

function anim() {
  word.innerHTML = word.innerHTML
    .split('')
    .map(function(elem, i) {
      return `<div class="repa" style="transform: rotate(${i * 60}deg")>${elem}</div>`;
    })
    .join('');
}

anim();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.words {
  width: 100%;
  position: relative;
}

.word {
  font-size: 33px;
}

.repa {
  position: absolute;
  left: 50%;
  font-size: 1.2em;
  text-transform: uppercase;
  transform-origin: 50% 100px;
  animation: angle 3s ease-in-out;
}

@keyframes angle { from { transform: rotate(0); } }

<div class="words">
  <p class="word">Ruslan</p>
</div>

БЛОГ НА HUSL

Помогите плиз дописать код. Не получается добавить transition

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