IinnerHTML mit Übergang/Animation CSS

Question

So habe ich Javascript-Code:

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

kann ich CSS Transition verwenden, wenn innerHTML- zeigt das Ergebnis? wie einblenden von rechts oder tippen animation wie in diesem link https://codepen.io/rusjames/pen/uAFhE

irgendein Vorschlag? Dank vor

Answer 1

die Animation zu einer Klasse zuweisen, dann geben Sie das Element der Animationsklasse, nachdem Sie den Text mit 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>