POC: view transitions

Author: timmo001

src/common/dom/view_transition.ts

@@ -0,0 +1,53 @@
+/**
+ * Trigger a view transition if supported by the browser
+ * @param updateCallback - Callback function that updates the DOM
+ * @returns Promise that resolves when the transition is complete
+ */
+export const startViewTransition = async (
+  updateCallback: () => void | Promise<void>
+): Promise<void> => {
+  // Check if View Transitions API is supported
+  if (
+    !document.startViewTransition ||
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  ) {
+    // Fallback: just run the update without transition
+    await updateCallback();
+    return;
+  }
+
+  // Start the view transition
+  const transition = document.startViewTransition(async () => {
+    await updateCallback();
+  });
+
+  try {
+    await transition.finished;
+  } catch (error) {
+    // Transitions can be skipped, which is fine
+    // eslint-disable-next-line no-console
+    console.debug("View transition skipped or failed:", error);
+  }
+};
+
+/**
+ * Helper to apply view transition on first render
+ * @param _element - The element to observe (unused, kept for API consistency)
+ * @param callback - Callback when element is first rendered
+ */
+export const applyViewTransitionOnLoad = (
+  _element: HTMLElement,
+  callback?: () => void
+): void => {
+  if (!document.startViewTransition) {
+    callback?.();
+    return;
+  }
+
+  // Use requestAnimationFrame to ensure DOM is ready
+  requestAnimationFrame(() => {
+    startViewTransition(() => {
+      callback?.();
+    });
+  });
+};

src/components/ha-sidebar.ts

@@ -28,6 +28,7 @@ import {
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { applyViewTransitionOnLoad } from "../common/dom/view_transition";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { stringCompare } from "../common/string/compare";
 import { throttle } from "../common/util/throttle";
@@ -41,7 +42,7 @@ import { updateCanInstall } from "../data/update";
 import { showEditSidebarDialog } from "../dialogs/sidebar/show-dialog-edit-sidebar";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
-import { haStyleAnimations, haStyleScrollbar } from "../resources/styles";
+import { haStyleScrollbar, haStyleViewTransitions } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
 import "./ha-fade-in";
 import "./ha-icon";
@@ -306,6 +307,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this._subscribePersistentNotifications();
+
+    // Trigger view transition on initial load
+    applyViewTransitionOnLoad(this);
   }
 
   private _subscribePersistentNotifications(): void {
@@ -326,12 +330,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       toggleAttribute(this, "expanded", this.alwaysExpand);
     }
 
-    // Staggered animation for list items based on index
+    // Set up view transition names for staggered animations
     this._listItems.forEach((item, index) => {
-      (item as HTMLElement).style.setProperty(
-        "--animation-index",
-        String(index + 1)
-      );
+      (item as HTMLElement).style.viewTransitionName = `sidebar-item-${index}`;
     });
 
     if (!changedProps.has("hass")) {
@@ -705,7 +706,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
-      haStyleAnimations,
+      haStyleViewTransitions,
       css`
         :host {
           overflow: visible;
@@ -752,14 +753,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         }
         .menu ha-icon-button {
           color: var(--sidebar-icon-color);
-          animation: fadeInSlideDown var(--ha-animation-duration) ease-out both;
-          animation-delay: var(--ha-animation-delay-base) / 2;
-        }
-        ha-md-list-item {
-          animation: fadeInSlideDown var(--ha-animation-duration) ease-out both;
-          animation-delay: calc(
-            var(--ha-animation-delay-base) * var(--animation-index, 1) / 2
-          );
+          view-transition-name: sidebar-menu-button;
         }
         .title {
           margin-left: 3px;

src/panels/lovelace/hui-root.ts

@@ -25,6 +25,10 @@ import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
+import {
+  applyViewTransitionOnLoad,
+  startViewTransition,
+} from "../../common/dom/view_transition";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
 import { goBack, navigate } from "../../common/navigate";
 import type { LocalizeKeys } from "../../common/translations/localize";
@@ -72,7 +76,7 @@ import {
 } from "../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showShortcutsDialog } from "../../dialogs/shortcuts/show-shortcuts-dialog";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
-import { haStyle, haStyleAnimations } from "../../resources/styles";
+import { haStyle, haStyleViewTransitions } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { showToast } from "../../util/toast";
@@ -623,6 +627,9 @@ class HUIRoot extends LitElement {
     window.addEventListener("scroll", this._handleWindowScroll, {
       passive: true,
     });
+
+    // Trigger view transition on initial load
+    applyViewTransitionOnLoad(this);
   }
 
   public connectedCallback(): void {
@@ -1162,43 +1169,45 @@ class HUIRoot extends LitElement {
     // Recreate a new element to clear the applied themes.
     const root = this._viewRoot;
 
-    if (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
+    startViewTransition(() => {
+      if (root.lastChild) {
+        root.removeChild(root.lastChild);
+      }
 
-    if (viewIndex === "hass-unused-entities") {
-      const unusedEntities = document.createElement("hui-unused-entities");
-      // Wait for promise to resolve so that the element has been upgraded.
-      import("./editor/unused-entities/hui-unused-entities").then(() => {
-        unusedEntities.hass = this.hass!;
-        unusedEntities.lovelace = this.lovelace!;
-        unusedEntities.narrow = this.narrow;
-      });
-      root.appendChild(unusedEntities);
-      return;
-    }
+      if (viewIndex === "hass-unused-entities") {
+        const unusedEntities = document.createElement("hui-unused-entities");
+        // Wait for promise to resolve so that the element has been upgraded.
+        import("./editor/unused-entities/hui-unused-entities").then(() => {
+          unusedEntities.hass = this.hass!;
+          unusedEntities.lovelace = this.lovelace!;
+          unusedEntities.narrow = this.narrow;
+        });
+        root.appendChild(unusedEntities);
+        return;
+      }
 
-    let view;
-    const viewConfig = this.config.views[viewIndex];
+      let view;
+      const viewConfig = this.config.views[viewIndex];
 
-    if (!viewConfig) {
-      this.lovelace!.setEditMode(true);
-      return;
-    }
+      if (!viewConfig) {
+        this.lovelace!.setEditMode(true);
+        return;
+      }
 
-    if (!force && this._viewCache![viewIndex]) {
-      view = this._viewCache![viewIndex];
-    } else {
-      view = document.createElement("hui-view");
-      view.index = viewIndex;
-      this._viewCache![viewIndex] = view;
-    }
+      if (!force && this._viewCache![viewIndex]) {
+        view = this._viewCache![viewIndex];
+      } else {
+        view = document.createElement("hui-view");
+        view.index = viewIndex;
+        this._viewCache![viewIndex] = view;
+      }
 
-    view.lovelace = this.lovelace;
-    view.hass = this.hass;
-    view.narrow = this.narrow;
+      view.lovelace = this.lovelace;
+      view.hass = this.hass;
+      view.narrow = this.narrow;
 
-    root.appendChild(view);
+      root.appendChild(view);
+    });
   }
 
   private _openShortcutDialog(ev: Event) {
@@ -1209,7 +1218,7 @@ class HUIRoot extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      haStyleAnimations,
+      haStyleViewTransitions,
       css`
         :host {
           -ms-user-select: none;
@@ -1264,8 +1273,7 @@ class HUIRoot extends LitElement {
           padding: 0px 12px;
           font-weight: var(--ha-font-weight-normal);
           box-sizing: border-box;
-          animation: fadeIn var(--ha-animation-duration) ease-out both;
-          animation-delay: var(--ha-animation-delay-base);
+          view-transition-name: lovelace-toolbar;
         }
         .narrow .toolbar {
           padding: 0 4px;
@@ -1414,8 +1422,7 @@ class HUIRoot extends LitElement {
         hui-view-container > * {
           flex: 1 1 100%;
           max-width: 100%;
-          animation: fadeInSlideDown var(--ha-animation-duration) ease-out both;
-          animation-delay: var(--ha-animation-delay-base);
+          view-transition-name: lovelace-view;
         }
         /**
          * In edit mode we have the tab bar on a new line *

src/resources/styles.ts

@@ -200,33 +200,72 @@ export const baseEntrypointStyles = css`
   }
 `;
 
-export const haStyleAnimations = css`
-  @keyframes fadeIn {
-    0% {
+export const haStyleViewTransitions = css`
+  /* View Transition animations for sidebar and lovelace */
+  @media (prefers-reduced-motion: no-preference) {
+    /* Toolbar fade in */
+    ::view-transition-group(lovelace-toolbar) {
+      animation-duration: var(--ha-animation-duration);
+      animation-timing-function: ease-out;
+    }
+    ::view-transition-new(lovelace-toolbar) {
+      animation: fade-in var(--ha-animation-duration) ease-out;
+      animation-delay: var(--ha-animation-delay-base);
+    }
+
+    /* View slide down */
+    ::view-transition-group(lovelace-view) {
+      animation-duration: var(--ha-animation-duration);
+      animation-timing-function: ease-out;
+    }
+    ::view-transition-new(lovelace-view) {
+      animation: fade-in-slide-down var(--ha-animation-duration) ease-out;
+      animation-delay: var(--ha-animation-delay-base);
+    }
+
+    /* Sidebar menu button */
+    ::view-transition-group(sidebar-menu-button) {
+      animation-duration: var(--ha-animation-duration);
+      animation-timing-function: ease-out;
+    }
+    ::view-transition-new(sidebar-menu-button) {
+      animation: fade-in-slide-down var(--ha-animation-duration) ease-out;
+      animation-delay: calc(var(--ha-animation-delay-base) / 2);
+    }
+
+    /* Sidebar items with staggered animation */
+    ::view-transition-group(sidebar-item-*) {
+      animation-duration: var(--ha-animation-duration);
+      animation-timing-function: ease-out;
+    }
+  }
+
+  @keyframes fade-in {
+    from {
       opacity: 0;
     }
-    100% {
+    to {
       opacity: 1;
     }
   }
 
-  @keyframes fadeInSlideUp {
-    0% {
+  @keyframes fade-in-slide-up {
+    from {
       opacity: 0;
       transform: translateY(20px);
     }
-    100% {
+    to {
       opacity: 1;
       transform: translateY(0);
     }
   }
 
-  @keyframes fadeInSlideDown {
-    0% {
+  @keyframes fade-in-slide-down {
+    from {
       opacity: 0;
       transform: translateY(-20px);
     }
-    100% {
+    to {
       opacity: 1;
       transform: translateY(0);
     }

src/resources/theme/core.globals.ts

@@ -46,12 +46,19 @@ export const coreStyles = css`
     /* Animation timing */
     --ha-animation-duration: 350ms;
     --ha-animation-delay-base: 50ms;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      --ha-animation-duration: 150ms;
+      --ha-animation-delay-base: 20ms;
+    }
+  }
 
-    @media (prefers-reduced-motion: reduce) {
-      html {
-        --ha-animation-duration: 150ms;
-        --ha-animation-delay-base: 20ms;
-      }
+  /* Enable View Transitions API for supported browsers */
+  @supports (view-transition-name: none) {
+    :root {
+      view-transition-name: root;
     }
   }
 `;