Есть ли другой способ сделать лучшую анимацию при изменении элемента HTML?

Question

Я создаю некоторый код для изменения элемента HTML с помощью setTimeout ().

Можно ли каким-то другим способом сделать более красивую анимацию, например, если элемент отображается медленно?

Я связался с setInterval (), я пытался с fadeIn (), но я не знаю, как с этим справиться.

var words= [' Web', ' Fullstack', ' Mobile', ' Php'];

var i = 0;

var word = document.getElementById("word");

function newWord(){
    word.innerHTML = words[i];

    if(i < words.length - 1){
        i++;
    }
    else{
        i = 0;
    }

    setTimeout("newWord()", 2000);

    }

    window.onload = function(){
        newWord();
    }

вот так это работает, слово меняется каждые 2 с, но я хочу, чтобы некоторые эффекты когдаслово меняется.

Answer 1

Нахожу, что-то работает.

Я просто положил это:

$('#word').fadeOut(2000, function(){ $('#word').fadeIn(2000);});

за другим, и это работает довольно хорошо.

Answer 2

Вы можете добавить переход к тексту, используя CSS:

#word {
  transition: transition-length linear all;
}

Это создает переход для каждого элемента стиля, который вы изменяете с помощью JavaScript