Как сделать так, чтобы текст div отображался построчно, а не сразу?
Я использую IBM Watson, и сейчас мой текст разделен на <br> <br>
с любым количеством пробелов между <br>'s
, Я попытался разделить мой текст JSON на <br>'s
и отображение с небольшой задержкой, но это на самом деле не работает. Я также пробовал непрозрачность и показ теребления. Вот ручка того, как работает код, который создает элементы сообщения HTML DOM. Каждая полезная нагрузка помещается в div и отображается сразу.
Мне нужно, чтобы каждая строка была разбита на <br> <br>
появиться вскоре после предыдущего, как эффект мгновенного сообщения. Спасибо!
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>