如何使 div 文本逐行显示，而不是一次全部显示？答案

【问题标题】：How to make div text appear line by line instead of all at once?如何使 div 文本逐行显示，而不是一次全部显示？
【发布时间】：2018-04-30 11:40:19
【问题描述】：

我正在使用 IBM 的 Watson，现在我的文本被   分割， 's 之间有任意数量的空格。我尝试在 's 处拆分我的 JSON 文本并稍微延迟进行映射，但它并没有真正起作用。我也尝试过不透明度和显示摆弄。 Here's a pen 构建 HTML DOM 消息元素的代码是如何工作的。每个有效负载都被放入一个 div 并一次显示。

我需要在  处拆分的每一行在前一行之后不久出现，就像即时消息效果一样。谢谢！

【问题讨论】：

你有没有在回调中尝试 setTimeout 和 appendChild？

标签： javascript html css animation watson-assistant

【解决方案1】：

试试这个，你可能需要改进正则表达式以考虑浏览器的差异......等等：

const target = document.getElementById('target');
const newInnerHTML = target.innerHTML
  .split(/<br>\s*/i)
  .map((text, i) => '<p style="animation-delay:' + (400 * i) + 'ms">' + text + '</p>')
  .join(''); 

target.innerHTML = newInnerHTML;

#target p {
  opacity: 0;
  animation: fade-in 2s forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div id="target"> Hi, I'm Watson. <br> <br> I need to appear line by line.
</div>

【讨论】：