transition

This method implements the same logic as the <transition> component from Vue to apply CSS based transition to a DOM element.

Usage

import { transition } from '@studiometa/js-toolkit/utils';

// Will apply and remove the following classes sequentially:
// - fade-from
// - fade-active
// - fade-to
transition(document.body, 'fade');

// Will apply and remove the following styles sequentially:
// - opacity: 0;
// - transition: opacity 1s ease-out
transition(document.body, {
  from: { opacity: 0 },
  active: { transition: 'opacity 1s ease-out' },
});

// Will apply and remove the following classes sequentially:
// - opacity-0
// - transition duration-500
// - opacity-50
transition(document.body, {
  from: 'opacity-0',
  active: 'transition duration-500',
  to: 'opacity-50',
});

// Will apply and remove the following classes sequentially:
// - opacity-0
// - transition duration-500
// And keep the latest class at the end:
// - opacity-50
transition(
  document.body,
  {
    from: 'opacity-0',
    active: 'transition duration-500',
    to: 'opacity-50',
  },
  'keep',
);

// Will apply a transition on multiple elements.
// With an array of elements:
transition(
  [
    document.querySelector('#one'),
    document.querySelector('#two'),
    document.querySelector('#three'),
  ],
  'fade',
);
// With a NodeList:
transition(document.querySelectorAll('.should-fade'), 'fade');

Parameters

• element (HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>): the target DOM element
• name (String|Object): the name of the transition or an object of classes or styles to apply
• endMode = 'remove' (String): whether or not the transition keeps its final state or not, can be remove or keep, defaults to remove.

Return value

• Promise: a Promise resolving when the transition has ended