带有过渡/动画 CSS 的 IinnerHTML

【问题标题】：IinnerHTML with transition/ animation CSS带有过渡/动画 CSS 的 IinnerHTML
【发布时间】：2017-02-14 18:17:59
【问题描述】：

所以我有 javascript 代码：

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

当 innerHTML 显示结果时，我可以使用 CSS 过渡吗？喜欢从右侧淡入或在此链接中输入动画https://codepen.io/rusjames/pen/uAFhE

有什么建议吗？谢谢之前

【问题讨论】：

标签： javascript css css-transitions css-animations innerhtml

【解决方案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; } 
}

&lt;p id="name"&gt;&lt;/p&gt;

【讨论】：

如果我想淡入结果怎么办？
@Rian 真棒，np