Блог

Я всегда могу добавить fadeIn с переходом. Но по какой-то причине fadeOut никогда не работает. Даже после установки непрозрачности в 0 и перехода к родительскому элементу body / class.

Мне интересно, возможно ли отключить то же самое, что и fade in, при нажатии?

Кто-нибудь может объяснить, что я делаю не так, и возможно ли это сделать?

 body {
    height: 100%;
    padding: 0;
    margin: 0;
    color: $text-body;
    overflow-x: hidden;
    overflow-y: auto;

    amp;:after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -10;
        visibility: hidden;
        opacity: 0;
        transition: opacity 1.2s ease-out;
    }

    amp;.bg-dark {
        amp;:after {
            background: rgba($color-black, 0.7);
            visibility: visible;
            opacity: 1;
            z-index: 100;
            transition: opacity 1.2s ease-out;
        }
    }

    @if $use-custom-fonts == true {
        font-family: $font-body-custom;
    } @else {
        font-family: $font-body;
    }
}
  

Мой JS:

 (() => {
    const menuToggle = document.querySelector('[rel="js-menu"]');
    const body = document.body;

    if (!menuToggle) {
        return;
    }

    const sideNav = document.querySelector('[rel="js-side__nav"]');
    const sideNavClose = document.querySelector('[rel="js-side__close"]');

    const openMenu = (e) => {
        sideNav.classList.add('side__nav--open');
        body.classList.add('bg-dark');

        e.preventDefault();
    };

    const closeMenu = (e) => {
        if (sideNav.classList.contains('side__nav--open')) {
            sideNav.classList.remove('side__nav--open');
            body.classList.remove('bg-dark');
        }

        e.preventDefault();
    };

    document.addEventListener('keyup', (e) => {
        if (e.keyCode === 27) {
            if (sideNav.classList.contains('side__nav--open')) {
                sideNav.classList.remove('side__nav--open');
                body.classList.remove('bg-dark');
            }
        }
    });

    menuToggle.addEventListener('click', openMenu);
    sideNavClose.addEventListener('click', closeMenu);
})();
  

Проблема в visibility: hidden; . Он мгновенно скрывает ваш элемент без перехода, который действует только для opacity .

Другая проблема заключается в том, что background-color устанавливается только на .bg-dark и transition только для opacity . Таким образом, непрозрачность работает, но изменение цвета фона происходит мгновенно.

Я привел пример с удаленным visibility и примененным background для начального состояния (без .bg-dark )

 (() => {
    const menuToggle = document.querySelector('[rel="js-menu"]');
    const body = document.body;

    if (!menuToggle) {
        return;
    }

    const sideNav = document.querySelector('[rel="js-side__nav"]');
    const sideNavClose = document.querySelector('[rel="js-side__close"]');

    const openMenu = (e) => {
        sideNav.classList.add('side__nav--open');
        body.classList.add('bg-dark');
        e.preventDefault();
    };

    const closeMenu = (e) => {
        if (sideNav.classList.contains('side__nav--open')) {
            sideNav.classList.remove('side__nav--open');
            body.classList.remove('bg-dark');
        }
        e.preventDefault();
    };

    
    menuToggle.addEventListener('click', openMenu);
    sideNavClose.addEventListener('click', closeMenu);
})();  

 body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
body:after {
  content: '';
  position: fixed;
  /* moved background style here */
  background: rgba(0, 0, 0, 0.7);
  /* removed visibility */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
body.bg-dark:after {
  opacity: 1;
  z-index: -1;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div rel="js-side__nav"></div>
<button rel="js-side__close">close</button>
<button rel="js-menu">open</button>