Fade-In Page Transitions

<style>
/* The fade-in is pure CSS, so pages stay visible even when JavaScript is off or fails. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes wpide-page-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    body {
        animation: wpide-page-fade-in .4s ease-out backwards;
    }
    html.wpide-page-leaving body {
        opacity: 0;
        transition: opacity .2s ease-in;
    }
}
</style>
<script>
(function () {
    var FADE_OUT_MS = 200; // Fade out before following a link. Set to 0 to only fade in.

    if (!FADE_OUT_MS || !window.matchMedia || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
        return;
    }

    var root = document.documentElement;
    var skipFiles = /\.(jpe?g|png|gif|webp|avif|svg|pdf|zip|rar|7z|mp3|mp4|mov|webm|docx?|xlsx?|pptx?|csv|txt)$/i;

    // Listening on window runs after other click handlers, so links they take over are left alone.
    window.addEventListener('click', function (event) {
        if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
            return;
        }

        var link = event.target && event.target.closest ? event.target.closest('a[href]') : null;

        if (!link || (link.target && link.target !== '_self') || link.hasAttribute('download') || link.closest('.no-fade, [data-no-fade]')) {
            return;
        }

        var url = new URL(link.href, location.href);

        if (url.origin !== location.origin || !/^https?:$/.test(url.protocol)) {
            return;
        }

        if (url.hash && url.pathname === location.pathname && url.search === location.search) {
            return;
        }

        if (skipFiles.test(url.pathname) || /[?&](add-to-cart|download)=/.test(url.search)) {
            return;
        }

        event.preventDefault();
        root.classList.add('wpide-page-leaving');

        setTimeout(function () {
            location.href = url.href;
        }, FADE_OUT_MS);

        // Show the page again if the navigation does not happen.
        setTimeout(function () {
            root.classList.remove('wpide-page-leaving');
        }, 3000);
    });

    // Pages restored with the Back button come back visible.
    window.addEventListener('pageshow', function (event) {
        if (event.persisted) {
            root.classList.remove('wpide-page-leaving');
        }
    });
})();
</script>