javascript - 带过渡/动画 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>