Как реализовать вывод поочередного текста в div?

Question

[germanberg]

Нужно добиться вывода текста в div
пример:
есть кнопка... нажимаем ее и в div через секунду появляется (текст 1)
исчезает через 3 секунды...
следом появляется текст (текст 2) исчезает через 4-5 сек...
и появляется еще один текст (текст 3) но уже не исчезает...
Помогите кто чем может =)

Answer 1

[Vlad Feninets]

<button id="run">click me</button>
<div id="block"></div>

.fade-effect.-show {
  animation: fade 0.5s ease;
}

@keyframes fade {
	from { opacity: 0; }
	to { opacity: 1 }
}

const textArr = [ 'OH', 'MY', 'GLOB' ]

const divEl = document.querySelector('#block')
const changeDelay = 2000
const fadeOutDelay = 1000

document.querySelector('#run').addEventListener('click', () => { 
    textArr.map((txt, idx) => {
        setTimeout(() => {
            divEl.className = 'fade-effect -show'
            divEl.innerHTML = txt

            setTimeout(() => {
                divEl.className = ''
            }, !idx ? fadeOutDelay : idx * fadeOutDelay)

        }, idx * changeDelay)
    })
})

DEMO:
https://jsfiddle.net/fnnzzz/4eqL36da/4