Как сделать так, чтобы текст div отображался построчно, а не сразу?

Question

Как сделать так, чтобы текст div отображался построчно, а не сразу?

Я использую IBM Watson, и сейчас мой текст разделен на   с любым количеством пробелов между  's, Я попытался разделить мой текст JSON на  's и отображение с небольшой задержкой, но это на самом деле не работает. Я также пробовал непрозрачность и показ теребления. Вот ручка того, как работает код, который создает элементы сообщения HTML DOM. Каждая полезная нагрузка помещается в div и отображается сразу.

Мне нужно, чтобы каждая строка была разбита на   появиться вскоре после предыдущего, как эффект мгновенного сообщения. Спасибо!

0

javascript html css animation watson-assistant

Источник

user9381550 30 апр '18 в 11:40

1 ответ

Другие вопросы по тегам javascript html css animation watson-assistant

user4765497 30 апр '18 в 12:24 2018-04-30 12:24 · Answer 1 · 2018-04-30 12:24

Попробуйте, вам может понадобиться улучшить регулярное выражение, чтобы учесть различия в браузере... и т. Д.

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>