IinnerHTML с переходом/анимация CSS

Question

Так что я код JavaScript:

document.getElementById("name").innerHTML = name ; 

можно использовать CSS Переход, когда innerHTML показывает результат? как fade in from right или typing animation, как в этой ссылке https://codepen.io/rusjames/pen/uAFhE

любое предложение? благодаря, прежде чем

Answer 1

Назначьте анимацию к классу, а затем дать элемент класс анимации после обновления текста с innerHTML

var name = 'somebody'; 
 
    el = document.getElementById("name"); 
 

 
el.innerHTML = name; 
 
el.classList.add('type');

body { 
 
    background: #171717; 
 
} 
 

 
p { 
 
    color: lime; 
 
    font-family: "Courier"; 
 
    font-size: 20px; 
 
    margin: 10px 0 0 10px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    width: 30em; 
 
} 
 

 
.type { 
 
    animation: type 4s steps(60, end); 
 
} 
 

 
@keyframes type{ 
 
    from { width: 0; } 
 
}

<p id="name"></p>