How do you combine CSS & JS fade out onClick + fade in on page load?

Question

I'm trying to accomplish the following on my website:

When a button is clicked (onClick), fade out the entire screen to black.
Then fade in from black to load the next page (the URL that the button linked to).

I'm finding solutions to points 1 and 2 separately, but no solution that combines these. See below. Can someone help achieve 1 and 2 following each other?

/*JS code I found online to create a fade out to black onClick */

$(document).ready(function() {
      function toggle() {
        $('#overlay').toggleClass('backdrop');
        }
      $('[data-toggle="active"]').click(toggle);
    });

/*CSS code #1 I found online to create a fade out to black onClick */

    #overlay {
        width: 100%;
        height : 100%;
        opacity : 0;
        background: '#000';
        top: 0;
        left: 0;
        transition: opacity .25s;
        -moz-transition: opacity .25s;
        -webkit-transition: opacity .25s;
    }
    .backdrop {
        opacity: .4 !important;
    }

/*CSS code #2 I found online to create a fade in on pageload */

    #overlay {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
        <a class="btn btn-default" data-toggle="active" href="nextpage.com">Button</a>
        <a class="btn btn-default" data-toggle="active" href="nextpage2.com">Button</a>
        <div id="overlay"></div>
    </body>

The above JS code goes with CSS code #1, but that only creates a toggle function (source).

For the fade in on page load, I found CSS code #2 as seen above, but that doesn't fade in from black source:

How do you combine CSS & JS fade out onClick + fade in on page load?

0 Answers0