Плавная анимация для подложки бокового меню

Question

Всех приветствую.

Реализовываю боковое меню вот из этого примера: https://blog-kopilka.ru/demo_html/bootstrap4-sidebar/index.php

Не получается решить вопрос со скоростью появления/исчезновения полупрозрачной подложки, когда открывается/закрывается боковое меню.

В примере код, отвечающий за подложку, выглядит так:

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.overlay.active {
    display: block;
    opacity: 1;
}

Я понимаю, что свойство, отвечающее за скорость анимации является transition. Однако, как бы я не менял время данного свойства, появление/исчезновение подложки анимируется мгновенно. Выглядит это очень резко.

Буду признателен за пояснение причин, из-за которых свойство transition не работает у данного элемента. А также за рекомендации, как можно реализовать поставленную задачу и сделать появление/исчезновение подложки плавным.

Заранее благодарю за помощь.

Answer 1

display block; и display none; не берут свойство transition что бы случилось, так что можешь дерзать так или с помощю библиотеки jQuery

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    animation: anim 1s ease;
}

@keyframes anim{
  0%{display:block;}
  10%{opacity:0;}
  100%{opacity:1;}
}

Answer 2

Вам стоит отказаться от использование display так как они прерывает вашу анимацию. Только opacity вам тоже не поможет, так как элемент все еще находиться в области видимости и не будет пропускать некоторые события например клик на элементы стоящие ниже по z-index. Для того что бы пропустить клик на элементы который находятся ниже по z-index вас стоит использовать другие свойства. Например: visibility в паре с opacity.

Пример кода:

  .overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s, opacity 0.5s ease-in-out;
  }
  .overlay.active {
    visibility: visible;
    opacity: 1;
    transition: visible 0.5, opacity 0.5s ease-in;
  }

Пример песочницы: https://codesandbox.io/s/eloquent-water-rcmro?file=/index.html:111-515

БЛОГ НА HUSL

Плавная анимация для подложки бокового меню

Ответы (2 шт):