@narem

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

Блок почему-то появляется без анимации опасити, почему так? И как это исправить?
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;
}
  • Вопрос задан
  • 43 просмотра
Пригласить эксперта
Ответы на вопрос 1
DanArst
@DanArst Куратор тега CSS
Гриффиндор в моде при любой погоде!
Подробнее про метод 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');
        });       
};
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы