batman - keyframes/animations VS inline styles

bat.md

Animation & Keyframes

• Requires CSS
• Styles isolated into a single CSS classname
• Only need to remove the class with one event listener

const BATMAN_CLASS = 'batman';

export default function batmanBounce() {
  const { body } = document;
  const reset = function() {
    body.classList.remove(BATMAN_CLASS);
    body.removeEventListener('animationend', reset);
  };
  body.addEventListener('animationend', reset);
  body.classList.add(BATMAN_CLASS);
}

Inline Styles

• Needs more event listeners because we have to remove both the transform & transition property at different times
  1. Add both transition transform style. With event listener to remove transform.
  2. Fire listener to remove transform. Add event listener to remove transition.
  3. Fire event listener to remvoe transition. Now we're truly back where we started.

var t = document.body;
​
var play = function() {
  t.style.transform = 'rotate(1080deg) scale(.1)';
  t.style.transition = '.5s ease-in-out';
  t.addEventListener('transitionend', reset);
};

var resetTransition = function() {
  this.style.transition = 'none';
  this.removeEventListener('transitionend', resetTransition);
}
​
var reset = function() {
  this.style.transform = 'none';
  this.removeEventListener('transitionend', reset);
  t.addEventListener('transitionend', resetTransition);
};