I recently noticed on my blog that sometimes the CSS hover transitions for font-size, border-color, and color animate on page load. While this doesn’t impact the final design, it does make the initial page load a bit of a stylistic mess.

I stumbled upon a great post on css-tricks that outlined a fix for this issue using jQuery. However, my goal for this site has always been keeping it as lean as possible. That's why I use Jekyll for static pages and minimal scripting (outside Disqus and Google Analytics). So of course I dug into how we can skip jQuery and just use ES6.

Here’s what the issue looks like:

Page loading with CSS transition

The fix discussed in the above article goes like this. First we add a new class to the body (or could be html) element. This can be whatever you want. I called mine .preload-transitions for extra readability.

<body class="preload-transitions">
  <!-- more elements -->
</body>

<!-- Alternative for html -->
<html class="preload-transitions">
 <!-- more elements -->
</html>

Next we write a SCSS rule (you could also just use CSS here but I preferred SCSS for cleaning the rule up a bit) that ensures that all elements beneath the class above have their transitions disabled. And for extra assurance drop an !important on them. !important just means that we really, really want this value to be used over other inherited rules.

// Note the * after the class name. This just selects everything after the initial
// class definition
.preload-transitions * {
  // Dry this up a bit with SCSS variable
  $null-transition: none !important;

  -webkit-transition: $null-transition;
  -moz-transition: $null-transition;
  -ms-transition: $null-transition;
  -o-transition: $null-transition;
  transition: $null-transition;
}

Lastly, we diverge from using jQuery and instead lean on ES6. First we’ll add an event listener to the DOMContentLoaded event (also known as page load). Next we find the CSS class that disables the transitions .preload-transitions. Lastly, once we know the DOM element, we remove the class from it.

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded",function(){
    let node = document.querySelector('.preload-transitions');
    node.classList.remove('preload-transitions');
  });
</script>

That’s it we’re done!

As far as browser support goes here’s some general notes with links to caniuse.com entries:

Have another CSS transition trick or hack? Did this solution work for you? Tell me about it below.

Previous

Adding a foreign key with a custom named association without using add_reference or add_foreign_key

Next

Using request-based constraints to only accept JSON formats for endpoints

Join the conversation

comments powered by Disqus