src/Plugins/SwapAnimation/SwapAnimation.js
function animate(from, to, {duration, easingFunction, horizontal}) {
  for (const element of [from, to]) {
    element.style.pointerEvents = 'none';
  }

  if (horizontal) {
    const width = from.offsetWidth;
    from.style.transform = `translate3d(${width}px, 0, 0)`;
    to.style.transform = `translate3d(-${width}px, 0, 0)`;
  } else {
    const height = from.offsetHeight;
    from.style.transform = `translate3d(0, ${height}px, 0)`;
    to.style.transform = `translate3d(0, -${height}px, 0)`;
  }

  requestAnimationFrame(() => {
    for (const element of [from, to]) {
      element.addEventListener('transitionend', resetElementOnTransitionEnd);
      element.style.transition = `transform ${duration}ms ${easingFunction}`;
      element.style.transform = '';
    }
  });
}
function animate(from, to, {duration, easingFunction, horizontal}) {
  for (const element of [from, to]) {
    element.style.pointerEvents = 'none';
  }

  if (horizontal) {
    const width = from.offsetWidth;
    from.style.transform = `translate3d(${width}px, 0, 0)`;
    to.style.transform = `translate3d(-${width}px, 0, 0)`;
  } else {
    const height = from.offsetHeight;
    from.style.transform = `translate3d(0, ${height}px, 0)`;
    to.style.transform = `translate3d(0, -${height}px, 0)`;
  }

  requestAnimationFrame(() => {
    for (const element of [from, to]) {
      element.addEventListener('transitionend', resetElementOnTransitionEnd);
      element.style.transition = `transform ${duration}ms ${easingFunction}`;
      element.style.transform = '';
    }
  });
}
function animate ( from , to , { duration , easingFunction , horizontal } ) { for ( const element of [ from , to ] ) { element . style . pointerEvents = 'none' ; } if ( horizontal ) { const width = from . offsetWidth ; from . style . transform = ` ${ width } ` ; to . style . transform = ` ${ width } ` ; } else { const height = from . offsetHeight ; from . style . transform = ` ${ height } ` ; to . style . transform = ` ${ height } ` ; } requestAnimationFrame ( ( ) => { for ( const element of [ from , to ] ) { element . addEventListener ( 'transitionend' , resetElementOnTransitionEnd ) ; element . style . transition = ` ${ duration } ${ easingFunction } ` ; element . style . transform = '' ; } } ) ; }
Animates two elements
@param {HTMLElement} from
@param {HTMLElement} to
@param {Object} options
@param {Number} options.duration
@param {String} options.easingFunction
@param {String} options.horizontal
@private
Animates two elements