if-with-transition

src/utils/control-flow/if.ts

@@ -21,6 +21,14 @@ import {
 } from '@/utils/shared';
 import { opcodeFor } from '@/utils/vm';
 
+export function startViewTransition(callback: () => void | Promise<void>){
+  if (document.startViewTransition) {
+    return document.startViewTransition(callback).ready;
+  } else {
+    return Promise.resolve().then(callback);
+  }
+}
+
 export class IfCondition {
   isDestructorRunning = false;
   prevComponent: GenericReturnType | null = null;
@@ -169,11 +177,14 @@ export class IfCondition {
     if (IS_DEV_MODE) {
       $DEBUG_REACTIVE_CONTEXTS.pop();
     }
-    renderElement(
-      this.placeholder.parentNode || this.target,
-      this.prevComponent,
-      this.placeholder,
-    );
+    startViewTransition(() => {
+      renderElement(
+        this.placeholder.parentNode || this.target,
+        this.prevComponent,
+        this.placeholder,
+      );
+    });
+
     return;
   }
   async destroy() {

types/index.d.ts

@@ -19,6 +19,23 @@ declare global {
   const REACTIVE_MODIFIERS: boolean;
   const WITH_HELPER_MANAGER: boolean;
   const WITH_MODIFIER_MANAGER: boolean;
+
+  interface Document {
+    startViewTransition(
+      updateCallback: () => Promise<void> | void,
+    ): ViewTransition;
+  }
+
+  interface ViewTransition {
+    finished: Promise<void>;
+    ready: Promise<void>;
+    updateCallbackDone: Promise<void>;
+    skipTransition(): void;
+  }
+
+  interface CSSStyleDeclaration {
+    viewTransitionName: string;
+  }
 }
 
 declare module 'glint-environment-gxt/globals' {