具有过渡/动画CSS的IinnerHTML

Question

所以我有JavaScript代码：

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

innerHTML显示结果时可以使用CSS Transition？ 例如从右侧淡入或在此链接中键入动画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>