Как применить анимации css к созданному блоку через js?

Question

[narem]

Блок почему-то появляется без анимации опасити, почему так? И как это исправить?

const createModal = () => {
        const enterModal = document.getElementById('telegram-modal');

        const modalWrap = document.createElement('div');

        modalWrap.classList.add('telegram-modal');
        
        enterModal.append(modalWrap);

        document.querySelector('.telegram-modal').classList.add('telegram-modal_active');
    };

.telegram-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	opacity: 0;
	background-color: rgba(255, 255, 255, 0.5);
	transition: opacity 5.4s ease;
}

.telegram-modal_active {
	opacity: 1;
}

Answer 1

[Danny Arty]

Подробнее про метод requestAnimationFrame

const createModal = () => {
        const enterModal = document.getElementById('telegram-modal');
        const modalWrap = document.createElement('div');

        modalWrap.classList.add('telegram-modal');
        
        enterModal.append(modalWrap);

        requestAnimationFrame(() => {  // добавить    
            document.querySelector('.telegram-modal').classList.add('telegram-modal_active');
        });       
};