0

I'm implementing smooth page transitions using JS / CSS on a site following this tutorial.

In the tutorial it says I should load the JS immediately after the browser has started to receive and render the first bytes of the page, not wating for DOMContentLoaded etc. This doesn't work for me, and I have to add DOMContentLoaded to make the script work. Here's the section that's not working:

function fadeInPage() {
  if (!window.AnimationEvent) { return; }
  var fader = document.getElementById('fader');
  fader.classList.add('fade-out');

})

Here's how it looks when it works:

window.addEventListener('DOMContentLoaded', function() {
  if (!window.AnimationEvent) { return; }
  var fader = document.getElementById('fader');
  fader.classList.add('fade-out');

})

Here's the full script:

function fadeInPage() {

window.addEventListener('DOMContentLoaded', function() {
  if (!window.AnimationEvent) { return; }
  var fader = document.getElementById('fader');
  fader.classList.add('fade-out');

})

document.addEventListener('DOMContentLoaded', function() {
    if (!window.AnimationEvent) { return; }
    var anchors = document.getElementsByTagName('a');
    for (var idx=0; idx<anchors.length; idx+=1) {
        if (anchors[idx].hostname !== window.location.hostname) {
            continue;
        }
        anchors[idx].addEventListener('click', function(event) {
            if (event.metaKey || event.ctrlKey) return;
            var fader = document.getElementById('fader'),
            anchor = event.currentTarget;

            var listener = function() {
                window.location = anchor.href;
                fader.removeEventListener('animationend', listener);
            };
            fader.addEventListener('animationend', listener);

            event.preventDefault();
            fader.classList.add('fade-in');
        });
    }
});

window.addEventListener('pageshow', function (event) {
    if (!event.persisted) {
        return;
    }
    var fader = document.getElementById('fader');
    fader.classList.remove('fade-in');
});

Here's the original author's example page that DOES work with no DOMContentLoaded. I'm not sure why this works, but mine doesn't.

Finally, I'm using the following function to add the inline script. I don't know if this is relevant, but I've included it for completeness:

function fader_script() {
wp_enqueue_script('fader', get_template_directory_uri() .'/js/fader.js', array(), '1.0', true);
    wp_add_inline_script('fader', $script, 'before');
}
add_action('wp_enqueue_scripts', 'fader_script');
  • 1
    In that example, the author: 1) Add <svg id="fader"></svg> right after <body>; 2) Add <script>fadeInPage();</script> right after that SVG markup; and 3) Load the fader script in head. Have you tried all that? – Sally CJ Oct 23 '19 at 16:51
  • 1
    I must have overlooked something, and / or the example is slightly different to the tutorial. Certainly the CSS selectors are. Got it working the same way as the example. Turns out it behaves better the way I did it anway (using wp_add_inline_script).. – user2265915 Oct 23 '19 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.