Ember View Transition API

page-transition-modifier.js

import Modifier from 'ember-modifier';
import { registerDestructor } from "@ember/destroyable";
import {service} from "@ember/service";
import {action} from "@ember/object";

function createDeferred() {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
  });
  return { promise, resolve, reject };
}

function cleanup(instance) {
  instance.router.off('routeWillChange', instance.routeWillChange);
}

export default class PageTransitionModifier extends Modifier {
  @service router;

  modify(element) {
    this.element = element;
    this.router.on('routeWillChange', this.routeWillChange);
    registerDestructor(this, cleanup);
  }

  @action
  async routeWillChange(transition) {
    if (transition.isIntermediate) {
      return;
    }

    if (!document.startViewTransition) {
      return;
    }

    const pausedTransition = createDeferred();
    transition.pause = pausedTransition.promise;
    const viewTransition = document.startViewTransition(async () => {
      pausedTransition.resolve();
      await transition.promise;
    });

    await viewTransition.updateCallbackDone;
  }
}

route.js

import Route from '@ember/routing/route';

export default class extends Route {
  async beforeModel(transition) {
    await super.beforeModel(...arguments);
    if (transition.pause) {
      await transition.pause;
    }
  }
}