turbo-transition/src/utilities.js

A “minion” for Turbo-Frames and Streams. This custom element transitions elements as they enter or leave the DOM.

export default class Utilities {
  async run(element, classes) {
    this.#applyInitialState(element, classes);

    await this.#nextFrame();

    this.#applyFinalState(element, classes);

    await this.#waitForCompletion(element);

    this.#cleanup(element, classes);
  }

  #applyInitialState(element, classes) {
    const activeClasses = classes.active.split(" ").filter(Boolean);
    const fromClasses = classes.from.split(" ").filter(Boolean);

    element.classList.add(...activeClasses, ...fromClasses);
  }

  #applyFinalState(element, classes) {
    const fromClasses = classes.from.split(" ").filter(Boolean);
    const toClasses = classes.to.split(" ").filter(Boolean);

    element.classList.remove(...fromClasses);
    element.classList.add(...toClasses);
  }

  #cleanup(element, classes) {
    const toClasses = classes.to.split(" ").filter(Boolean);
    const activeClasses = classes.active.split(" ").filter(Boolean);

    element.classList.remove(...toClasses, ...activeClasses);
  }

  #nextFrame() {
    return new Promise(resolve => {
      requestAnimationFrame(() => {
        requestAnimationFrame(resolve);
      });
    });
  }

  #waitForCompletion(element) {
    return Promise.all(
      element.getAnimations().map(animation => animation.finished)
    );
  }
}