CODEWITHSUNDEEP
jquerycsstwitter-bootstrapcss-transitions
iChido
iChido

Reputation: 4624

Opacity FadeIn and FadeOut Problems - FadeOut Failing CSS Only

I cannot figure out why my fadeout is not working for an overlay I am putting together. I would like to achieve most of this with css. The only time I want to use jQuery is when I toggle a display: block class after a delay.

What do I need to do so that the fadeout of the overlay works nicely after a brief delay?

I am also including a CodePen. https://codepen.io/ChidoYo/pen/jOmdZLK

HTML

    <div class="container border rounded mt-5">
      <div class="row">
        <div class="col pb-3">
          <h1>Opacity Fade In/Out</h1>
          <button class="btn btn-primary" id="toggle">Toggle</button>
        </div>
      </div>
    </div>

    <div class="superposer d-none"></div>
    <div class="drawer">
      <div class="row mx-0 mt-4">
        <div class="col">
          <h3>Drawer</h3>
        </div>
      </div>
    </div>

CSS

.superposer {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0,0,0,0.52);
      opacity: 0;
      // transition: opacity 0.2s ease-in-out 2s;
      animation: superposerFadeOut 1s ease-in-out 2s;

      &.active {
        opacity: 1;
        // transition: opacity 1s ease-in-out;
        animation: superposerFadeIn 0.5s ease-in-out;
      }
    }

    @keyframes superposerFadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    @keyframes superposerFadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    .drawer {
      position: fixed;
      top: 0;
      bottom: 0;
      transition: right 0.25s ease-in-out;
      right: -350px;
      background-color: white;
      border-left: 1px solid #999;
      width: 350px;

      &.active {
        transition: right 0.25s ease-in-out 0.25s;
        right: 0;
      }
    }

jQuery

$(() => {
      $('#toggle').on('click', () => {
        $('.superposer').toggleClass('active d-none');
        $('.drawer').addClass('active');
      });

      $('.superposer').on('click', () => {
        $('.superposer').removeClass('active');
        $('.drawer').removeClass('active');

        setTimeout(() => {
          $('.superposer').addClass('d-none')
        }, 1000)
      })
    })

Upvotes: 0

Views: 109

Answers (1)

Omar Siddiqui
Omar Siddiqui

Reputation: 1655

There are a few small issues with your code. The main reason as to why your .superposer does not fade out is because you are using display: none when it is not active. display cannot be animated/transitioned, since both these properties require a range of values that can be calculated. display has boolean values. It is either on, or off. There's nothing in between.

So just deleting the display lines in .superposer will make the FadeOut animation start working. However it won't be the behaviour you expect, because you need to make some changes to your JS as well.

I've made a codepen with these changes. You can have look at it here: https://codepen.io/OSquiddy/pen/ExmrMzX

I've also gotten rid of the animations, since what you want can easily be done with a transition instead.

Upvotes: 1

Related Questions