@SolidSnake13

Как подружить свойства display, opacity и transition?

Мне нужно, чтобы элемент плавно появлялся из ниоткуда. Его изначальные стили:
transition: 'all 1s linear';
display: 'none';
opacity: 0;


При клике он должен появляться и становиться в:
display: 'block';
opacity: 1;


В моем коде он появляется резко и не плавно совсем:
this.trigger.addEventListener('click', ()=>{
           this.popupWindow.style.display = 'block';   
           this.popupWindow.style.opacity = 1;        
 });


Я нашёл решение и спрятал прозрачность в setTimeout с 1/1000 долей секунды (и он действительно появляется плавно, как написано в css-свойстве transition):
this.trigger.addEventListener('click', ()=>{
           this.popupWindow.style.display = 'block';   
           setTimeout(()=>{this.popupWindow.style.opacity = 1}, 1); 
});


Хоть моё решение и работает, оно эстетически мне не нравится и я хотел бы найти более правильный, элегантный и лаконичный вариант решения этой проблемы. Спасибо за внимание.
  • Вопрос задан
  • 109 просмотров
Решения вопроса 3
AntonLitvinenko
@AntonLitvinenko
HTML coder
Свойство display не анимируется. Использую так
.elem {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
} 

.elem.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

Плюс транзишн и трансформ если нужно
Ответ написан
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Если нужно анимировать появление, то можно использовать animation:
Ответ написан
WblCHA
@WblCHA
Если нужно использовать именно дисплей, то:
this.trigger.addEventListener('click', ()=>{
           this.popupWindow.style.display = 'block';   
           setTimeout(() => { this.popupWindow.style.opacity = 1; }, 0);
 });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Intspirit Краснодар
от 80 000 до 150 000 ₽
Sportrecs Москва
от 150 000 до 200 000 ₽
17 янв. 2021, в 01:26
100000 руб./за проект
16 янв. 2021, в 22:34
10000 руб./за проект
16 янв. 2021, в 22:33
20000 руб./за проект