src/util/animation.js
function animateElement(css, options) {
  var playback = { onfinish: null };

  if (!Array.isArray(css) || css.length !== 2 || !options || !options.hasOwnProperty('duration')) {
    Promise.resolve().then(function() {
      if (playback.onfinish) {
        playback.onfinish();
      }
    });
    return playback;
  }

  var element = this;
  var duration = options.duration || 0;
  var delay = options.delay || 0;
  var easing = options.easing;
  var initialCss = css[0];
  var finalCss = css[1];
  var allCss = {};

  Object.keys(initialCss).forEach(function(key) {
    allCss[key] = true;
    element.style[key] = initialCss[key];
  });

  // trigger reflow
  element.offsetWidth;

  var transitionOptions = ' ' + duration + 'ms';
  if (easing) {
    transitionOptions += ' ' + easing;
  }
  if (delay) {
    transitionOptions += ' ' + delay + 'ms';
  }

  element.style.transition = Object.keys(finalCss).map(function(key) {
    return key + transitionOptions;
  }).join(', ');

  Object.keys(finalCss).forEach(function(key) {
    allCss[key] = true;
    element.style[key] = finalCss[key];
  });

  setTimeout(function() {
    Object.keys(allCss).forEach(function(key) {
      element.style[key] = '';
    });

    if (playback.onfinish) {
      playback.onfinish();
    }
  }, duration + delay);

  return playback;
}
function animateElement(css, options) {
  var playback = { onfinish: null };

  if (!Array.isArray(css) || css.length !== 2 || !options || !options.hasOwnProperty('duration')) {
    Promise.resolve().then(function() {
      if (playback.onfinish) {
        playback.onfinish();
      }
    });
    return playback;
  }

  var element = this;
  var duration = options.duration || 0;
  var delay = options.delay || 0;
  var easing = options.easing;
  var initialCss = css[0];
  var finalCss = css[1];
  var allCss = {};

  Object.keys(initialCss).forEach(function(key) {
    allCss[key] = true;
    element.style[key] = initialCss[key];
  });

  // trigger reflow
  element.offsetWidth;

  var transitionOptions = ' ' + duration + 'ms';
  if (easing) {
    transitionOptions += ' ' + easing;
  }
  if (delay) {
    transitionOptions += ' ' + delay + 'ms';
  }

  element.style.transition = Object.keys(finalCss).map(function(key) {
    return key + transitionOptions;
  }).join(', ');

  Object.keys(finalCss).forEach(function(key) {
    allCss[key] = true;
    element.style[key] = finalCss[key];
  });

  setTimeout(function() {
    Object.keys(allCss).forEach(function(key) {
      element.style[key] = '';
    });

    if (playback.onfinish) {
      playback.onfinish();
    }
  }, duration + delay);

  return playback;
}
function animateElement ( css , options ) { var playback = { onfinish : null } ; if ( ! Array . isArray ( css ) || css . length !== 2 || ! options || ! options . hasOwnProperty ( 'duration' ) ) { Promise . resolve ( ) . then ( function ( ) { if ( playback . onfinish ) { playback . onfinish ( ) ; } } ) ; return playback ; } var element = this ; var duration = options . duration || 0 ; var delay = options . delay || 0 ; var easing = options . easing ; var initialCss = css [ 0 ] ; var finalCss = css [ 1 ] ; var allCss = { } ; Object . keys ( initialCss ) . forEach ( function ( key ) { allCss [ key ] = true ; element . style [ key ] = initialCss [ key ] ; } ) ; // trigger reflow element . offsetWidth ; var transitionOptions = ' ' + duration + 'ms' ; if ( easing ) { transitionOptions += ' ' + easing ; } if ( delay ) { transitionOptions += ' ' + delay + 'ms' ; } element . style . transition = Object . keys ( finalCss ) . map ( function ( key ) { return key + transitionOptions ; } ) . join ( ', ' ) ; Object . keys ( finalCss ) . forEach ( function ( key ) { allCss [ key ] = true ; element . style [ key ] = finalCss [ key ] ; } ) ; setTimeout ( function ( ) { Object . keys ( allCss ) . forEach ( function ( key ) { element . style [ key ] = '' ; } ) ; if ( playback . onfinish ) { playback . onfinish ( ) ; } } , duration + delay ) ; return playback ; }
Very basic polyfill for Element.animate if it doesn't exist. If it does, use the native.
This only supports two css states. It will overwrite existing styles. It doesn't return an animation play control. It
only supports duration, delay, and easing. Returns an object with a property onfinish.
Very basic polyfill for Element . animate if it doesn t exist . If it does use the native . This only supports two css states . It will overwrite existing styles . It doesn t return an animation play control . It only supports duration delay and easing . Returns an object with a property onfinish .