ui: add view-transistions

packages/ui-default/utils/base.ts

@@ -183,6 +183,23 @@ export const request = {
   },
 };
 
+export function withTransistionCallback(callback: () => (Promise<void> | void)) {
+  // @ts-ignore
+  if (!document.startViewTransition) return callback?.();
+  // @ts-ignore
+  return document.startViewTransition(() => callback());
+}
+
+export async function setTemporaryViewTransitionNames(entries, vtPromise: Promise<void>) {
+  for (const [$el, name] of entries) {
+    $el.style.viewTransitionName = name;
+  }
+  await vtPromise;
+  for (const [$el] of entries) {
+    $el.style.viewTransitionName = '';
+  }
+}
+
 Object.assign(window.Hydro.utils, {
   i18n,
   rawHtml,
@@ -192,4 +209,6 @@ Object.assign(window.Hydro.utils, {
   tpl,
   delay,
   zIndexManager,
+  withTransistionCallback,
+  setTemporaryViewTransitionNames,
 });

packages/ui-default/utils/pjax.js

@@ -5,7 +5,7 @@ import $ from 'jquery';
 import { nanoid } from 'nanoid';
 import NProgress from 'nprogress';
 import Notification from 'vj/components/notification';
-import { request } from './base';
+import { request, withTransistionCallback } from './base';
 
 const pjax = {};
 
@@ -115,7 +115,7 @@ pjax.request = async (opt) => {
         }
       }
       $target.trigger('vjContentRemove');
-      $target.replaceWith($el);
+      withTransistionCallback(() => $target.replaceWith($el));
       $el.trigger('vjContentNew');
     }
   } catch (err) {