Prevent CSS animations before page load.

_has-css-animation.scss

/*
  Inspired by this post…

  https://css-tricks.com/transitions-only-after-page-load

  I didn't want to have to add something to
  the page initially, only to remove it later.

  Instead, I'm adding a "positive" flag via JS
  and am simply ignoring all animations and
  transitions if the flag is not present.
*/

html:not([data-has-css-animation="true"]) * {
  animation: none !important;
  transition: none !important;
}

cssAnimation.js

/*
  Used like so…
  
  ```
  import cssAnimation from './cssAnimation';
  
  cssAnimation.init();
  ```
*/

// ==========
// Constants.
// ==========

const event = 'DOMContentLoaded';
const attr = 'data-has-css-animation';
const d = document.documentElement;
const w = window;

// ==============
// Event handler.
// ==============

const handleLoad = () => {
  w.requestAnimationFrame(() => {
    d.setAttribute(attr, true);
  });
};

// ======================
// Remove event handlers.
// ======================

const unbind = () => {
  d.removeAttribute(attr);
  w.removeEventListener(event, handleLoad);
};

// ===================
// Add event handlers.
// ===================

const init = () => {
  // Prevent doubles.
  unbind();

  w.addEventListener(event, handleLoad);
};

// ==============
// Expose object.
// ==============

const cssAnimation = {
  init,
  unbind,
};

// =======
// Export.
// =======

export default cssAnimation;