packages/js-toolkit/utils/css/transition.js
/**
 * Manage CSS transition with class.
 *
 * This is heavily inspired by the Vue `<transition>` component
 * and the `@barba/css` package, many thanks to them!
 *
 * @param  {HTMLElement}   element The target element.
 * @param  {String|Object} name    The name of the transition or an object with the hooks classesOrStyles.
 * @param  {String}        endMode    Whether to remove or keep the `to` classes/styles
 * @return {Promise}               A promise resolving at the end of the transition.
 */
Manage CSS transition with class.
This is heavily inspired by the Vue `` component
and the `@barba/css` package, many thanks to them!

@param  {HTMLElement}   element The target element.
@param  {String|Object} name    The name of the transition or an object with the hooks classesOrStyles.
@param  {String}        endMode    Whether to remove or keep the `to` classes/styles
@return {Promise}               A promise resolving at the end of the transition.
Manage CSS transition with class . This is heavily inspired by the Vue ` ` component and the ` @barba / css ` package many thanks to them! @param { HTMLElement } element The target element . @param { String|Object } name The name of the transition or an object with the hooks classesOrStyles . @param { String } endMode Whether to remove or keep the ` to ` classes / styles @return { Promise } A promise resolving at the end of the transition .
async function transition(element, name, endMode = 'remove') {
  const classesOrStyles =
    typeof name === 'string'
      ? {
          from: `${name}-from`,
          active: `${name}-active`,
          to: `${name}-to`,
        }
      : {
          from: '',
          active: '',
          to: '',
          ...name,
        };
  const trs = Transition.getInstance(element);
  if (trs.isTransitioning) {
    end(element, classesOrStyles);
  }
  await start(element, classesOrStyles);
  await next(element, classesOrStyles);
  end(element, classesOrStyles, endMode);
  return Promise.resolve();
}
async function transition ( element , name , endMode = 'remove' ) { const classesOrStyles = typeof name === 'string' ? { from : ` ${ name } ` , active : ` ${ name } ` , to : ` ${ name } ` , } : { from : '' , active : '' , to : '' , ... name , } ; const trs = Transition . getInstance ( element ) ; if ( trs . isTransitioning ) { end ( element , classesOrStyles ) ; } await start ( element , classesOrStyles ) ; await next ( element , classesOrStyles ) ; end ( element , classesOrStyles , endMode ) ; return Promise . resolve ( ) ; }
Manage CSS transition with class.
Manage CSS transition with class .
// End any previous transition running on the element.