Как добавить плавности при смене текста на js?

Question

[an]

Как добавить плавности при смене текста на js (затухание или что то другое)?

Answer 1

[LolaHuligang]

Что-то вроде этого этого
То есть css классами.

Comments

[an]

Спасибо

Answer 2

[MeMoJlor]

или так:

<div class='main'>
   <div class='one' id="четное"></div>
   <div class='two' id="нечетное"></div>
</div>

.main{
  position: relative;
}
.main div{
  position: absolute;
  transition: 0.3s;
  font-size: 30px;
  color: white;
  font-weight: bold;
}
.one{
  background: red;
}
.two{
  background: blue;
}

const четное = document.querySelector('#четное'),
      нечетное = document.querySelector('#нечетное');

let text = ['hi', 'privet', 'hallo', 'salam'],
    count = 0;
    
setInterval(() => {
  count++;
  if(text.length <= count) {
    count = 0;
  }
  if(count % 2 == 0 || count == 0) {
    четное.textContent = text[count];
    четное.style.opacity = '1';
    нечетное.style.opacity = '0';
  } else if (count % 2) {
    нечетное.textContent = text[count];
    нечетное.style.opacity = '1';
    четное.style.opacity = '0';
  }
}, 1000)