IinnerHTML过渡/动画CSS

Question

所以我的javascript代码：

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

我可以使用CSS转换时的innerHTML显示结果？喜欢从右侧淡入或在此链接中输入动画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>