Remove

src/components/ha-top-app-bar-fixed.ts

@@ -2,13 +2,26 @@ import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-
 import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
 import { css } from "lit";
 import { customElement, property } from "lit/decorators";
+import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
+import { haStyleViewTransitions } from "../resources/styles";
 
 @customElement("ha-top-app-bar-fixed")
-export class HaTopAppBarFixed extends TopAppBarFixedBase {
+export class HaTopAppBarFixed extends ViewTransitionMixin(TopAppBarFixedBase) {
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
+  @property({ type: Boolean, reflect: true, attribute: "content-loading" })
+  public contentLoading = true;
+
+  protected override onLoadTransition(): void {
+    // Use reflected property since we can't add class to base component's rendered elements
+    this.startViewTransition(() => {
+      this.contentLoading = false;
+    });
+  }
+
   static override styles = [
     styles,
+    haStyleViewTransitions,
     css`
       header {
         padding-top: var(--safe-area-inset-top);
@@ -23,6 +36,10 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
         );
         padding-bottom: var(--safe-area-inset-bottom);
         padding-right: var(--safe-area-inset-right);
+        view-transition-name: layout-fade-in;
+      }
+      :host([content-loading]) .mdc-top-app-bar--fixed-adjust {
+        opacity: 0;
       }
       :host([narrow]) .mdc-top-app-bar--fixed-adjust {
         padding-left: var(--safe-area-inset-left);

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -10,14 +10,15 @@ import { html, css, nothing } from "lit";
 import { property, query, customElement } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
-import { haStyleScrollbar } from "../resources/styles";
+import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
+import { haStyleScrollbar, haStyleViewTransitions } from "../resources/styles";
 
 export const passiveEventOptionsIfSupported = supportsPassiveEventListener
   ? { passive: true }
   : undefined;
 
 @customElement("ha-two-pane-top-app-bar-fixed")
-export class TopAppBarBaseBase extends BaseElement {
+export class TopAppBarBaseBase extends ViewTransitionMixin(BaseElement) {
   protected override mdcFoundation!: MDCFixedTopAppBarFoundation;
 
   protected override mdcFoundationClass = MDCFixedTopAppBarFoundation;
@@ -144,7 +145,12 @@ export class TopAppBarBaseBase extends BaseElement {
           : nothing}
         <div class="main">
           ${this.pane ? html`<div class="shadow-container"></div>` : nothing}
-          <div class="content">
+          <div
+            class=${classMap({
+              content: true,
+              loading: !this._loaded,
+            })}
+          >
             <slot></slot>
           </div>
         </div>
@@ -245,6 +251,7 @@ export class TopAppBarBaseBase extends BaseElement {
   static override styles = [
     styles,
     haStyleScrollbar,
+    haStyleViewTransitions,
     css`
       header {
         padding-top: var(--safe-area-inset-top);
@@ -341,6 +348,10 @@ export class TopAppBarBaseBase extends BaseElement {
       .mdc-top-app-bar--pane .content {
         height: 100%;
         overflow: auto;
+        view-transition-name: layout-fade-in;
+      }
+      .content.loading {
+        opacity: 0;
       }
       .mdc-top-app-bar__title {
         font-size: var(--ha-font-size-xl);

src/html/index.html.template

@@ -37,6 +37,7 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        view-transition-name: layout-fade-out;
       }
       #ha-launch-screen svg {
         width: 112px;

src/layouts/hass-loading-screen.ts

@@ -61,6 +61,7 @@ class HassLoadingScreen extends LitElement {
           display: block;
           height: 100%;
           background-color: var(--primary-background-color);
+          view-transition-name: layout-fade-out;
         }
         .toolbar {
           display: flex;

src/layouts/hass-router-page.ts

@@ -3,6 +3,7 @@ import { ReactiveElement } from "lit";
 import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { navigate } from "../common/navigate";
+import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
 import type { Route } from "../types";
 
 const extractPage = (path: string, defaultPage: string) => {
@@ -43,7 +44,7 @@ export interface RouterOptions {
 // Time to wait for code to load before we show loading screen.
 const LOADING_SCREEN_THRESHOLD = 400; // ms
 
-export class HassRouterPage extends ReactiveElement {
+export class HassRouterPage extends ViewTransitionMixin(ReactiveElement) {
   @property({ attribute: false }) public route?: Route;
 
   protected routerOptions!: RouterOptions;
@@ -310,16 +311,18 @@ export class HassRouterPage extends ReactiveElement {
     page: string,
     routeOptions: RouteOptions
   ) {
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-    }
+    this.startViewTransition(() => {
+      if (this.lastChild) {
+        this.removeChild(this.lastChild);
+      }
 
-    const panelEl = this._cache[page] || this.createElement(routeOptions.tag);
-    this.updatePageEl(panelEl);
-    this.appendChild(panelEl);
+      const panelEl = this._cache[page] || this.createElement(routeOptions.tag);
+      this.updatePageEl(panelEl);
+      this.appendChild(panelEl);
 
-    if (routerOptions.cacheAll || routeOptions.cache) {
-      this._cache[page] = panelEl;
-    }
+      if (routerOptions.cacheAll || routeOptions.cache) {
+        this._cache[page] = panelEl;
+      }
+    });
   }
 }

src/layouts/hass-subpage.ts

@@ -1,15 +1,17 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, eventOptions, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import { goBack } from "../common/navigate";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
-import { haStyleScrollbar } from "../resources/styles";
+import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
+import { haStyleScrollbar, haStyleViewTransitions } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 
 @customElement("hass-subpage")
-class HassSubpage extends LitElement {
+class HassSubpage extends ViewTransitionMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public header?: string;
@@ -60,7 +62,14 @@ class HassSubpage extends LitElement {
           <slot name="toolbar-icon"></slot>
         </div>
       </div>
-      <div class="content ha-scrollbar" @scroll=${this._saveScrollPos}>
+      <div
+        class=${classMap({
+          content: true,
+          "ha-scrollbar": true,
+          loading: !this._loaded,
+        })}
+        @scroll=${this._saveScrollPos}
+      >
         <slot></slot>
       </div>
       <div id="fab">
@@ -85,6 +94,7 @@ class HassSubpage extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      haStyleViewTransitions,
       css`
         :host {
           display: block;
@@ -167,6 +177,10 @@ class HassSubpage extends LitElement {
           overflow-y: auto;
           overflow: auto;
           -webkit-overflow-scrolling: touch;
+          view-transition-name: layout-fade-in;
+        }
+        .content.loading {
+          opacity: 0;
         }
         :host([narrow]) .content {
           width: calc(

src/layouts/hass-tabs-subpage.ts

@@ -11,7 +11,8 @@ import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import "../components/ha-svg-icon";
 import "../components/ha-tab";
-import { haStyleScrollbar } from "../resources/styles";
+import { ViewTransitionMixin } from "../mixins/view-transition-mixin";
+import { haStyleScrollbar, haStyleViewTransitions } from "../resources/styles";
 import type { HomeAssistant, Route } from "../types";
 
 export interface PageNavigation {
@@ -29,7 +30,7 @@ export interface PageNavigation {
 }
 
 @customElement("hass-tabs-subpage")
-class HassTabsSubpage extends LitElement {
+class HassTabsSubpage extends ViewTransitionMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public supervisor = false;
@@ -185,7 +186,12 @@ class HassTabsSubpage extends LitElement {
             </div>`
           : nothing}
         <div
-          class="content ha-scrollbar ${classMap({ tabs: showTabs })}"
+          class=${classMap({
+            content: true,
+            "ha-scrollbar": true,
+            tabs: showTabs,
+            loading: !this._loaded,
+          })}
           @scroll=${this._saveScrollPos}
         >
           <slot></slot>
@@ -214,6 +220,7 @@ class HassTabsSubpage extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
+      haStyleViewTransitions,
       css`
         :host {
           display: block;
@@ -332,6 +339,10 @@ class HassTabsSubpage extends LitElement {
           margin-bottom: var(--safe-area-inset-bottom);
           overflow: auto;
           -webkit-overflow-scrolling: touch;
+          view-transition-name: layout-fade-in;
+        }
+        .content.loading {
+          opacity: 0;
         }
         :host([narrow]) .content {
           margin-left: var(--safe-area-inset-left);

src/mixins/view-transition-mixin.ts

@@ -0,0 +1,201 @@
+import type { PropertyValues, ReactiveElement } from "lit";
+import { state } from "lit/decorators";
+
+/**
+ * Abstract constructor type for a class that extends a reactive element
+ * @param T - The type of the reactive element
+ * @returns The abstract constructor
+ */
+type AbstractConstructor<T extends ReactiveElement> = abstract new (
+  ...args: any[]
+) => T;
+
+/**
+ * ViewTransitionMixin - Adds view transition support to reactive elements
+ *
+ * This mixin provides automatic fade-in transitions when content loads using the
+ * View Transition API. User preferences are respected for reduced motion.
+ * Falls back to synchronous updates for browsers that don't support the API.
+ *
+ * @example
+ * Basic usage:
+ * ```typescript
+ * @customElement("my-component")
+ * class MyComponent extends ViewTransitionMixin(LitElement) {
+ *   render() {
+ *     return html`
+ *       <div class=${classMap({ content: true, loading: !this._loaded })}>
+ *         <slot></slot>
+ *       </div>
+ *     `;
+ *   }
+ *
+ *   static styles = css`
+ *     .content {
+ *       view-transition-name: layout-fade-in;
+ *     }
+ *     .content.loading {
+ *       opacity: 0; // Hidden during initial load for transition
+ *     }
+ *   `;
+ * }
+ * ```
+ *
+ * @example
+ * Triggering transitions manually:
+ * ```typescript
+ * private _switchView() {
+ *   this.startViewTransition(() => {
+ *     // DOM updates here will be animated
+ *     this.currentView = newView;
+ *   });
+ * }
+ * ```
+ *
+ * @example
+ * Custom load behavior:
+ * ```typescript
+ * protected override onLoadTransition(): void {
+ *   // Custom logic before triggering transition
+ *   this.startViewTransition(() => {
+ *     this._loaded = true;
+ *     this._additionalSetup();
+ *   });
+ * }
+ * ```
+ *
+ * Features:
+ * - Automatic fade-in transition when slotted content loads
+ * - Provides `_loaded` state property for conditional rendering
+ * - `startViewTransition()` method for manual transitions
+ * - Respects prefers-reduced-motion user preference
+ * - Falls back gracefully when View Transition API unavailable
+ * - Automatic cleanup of event listeners
+ *
+ * The mixin monitors the default slot and triggers `onLoadTransition()` when
+ * content is available. Override `onLoadTransition()` to customize this behavior.
+ */
+export const ViewTransitionMixin = <
+  T extends AbstractConstructor<ReactiveElement>,
+>(
+  superClass: T
+) => {
+  abstract class ViewTransitionClass extends superClass {
+    /**
+     * Reference to the default (unnamed) slot element for monitoring content changes.
+     * Used to detect when slotted content is available to trigger load transitions.
+     */
+    private _slot?: HTMLSlotElement;
+
+    /**
+     * Prevents multiple slotchange events from triggering the transition more than once.
+     * Once content loads and transition starts, this flag ensures it won't retrigger.
+     */
+    private _transitionTriggered = false;
+
+    /**
+     * State property indicating whether content has finished loading.
+     * Use this in templates with the loading class pattern to hide content until ready.
+     */
+    @state() protected _loaded = false;
+
+    /**
+     * 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
+     */
+    protected async startViewTransition(
+      updateCallback: () => void | Promise<void>
+    ): Promise<void> {
+      if (
+        !document.startViewTransition ||
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      ) {
+        // Fallback: update without view transition
+        await updateCallback();
+        return;
+      }
+
+      const transition = document.startViewTransition(async () => {
+        await updateCallback();
+      });
+
+      try {
+        await transition.finished;
+      } catch {
+        // View transition failed - this is non-critical, continue silently
+      }
+    }
+
+    /**
+     * Callback executed when content is ready to transition in.
+     *
+     * Called automatically when:
+     * - The default slot receives content (slotchange event)
+     * - No slot exists in the component (triggers immediately after firstUpdated)
+     *
+     * Default implementation sets `_loaded = true` within a view transition.
+     * Override this method to add custom logic before or during the transition,
+     * but ensure you call `startViewTransition()` to maintain transition behavior.
+     */
+    protected onLoadTransition(): void {
+      this.startViewTransition(() => {
+        this._loaded = true;
+      });
+    }
+
+    /**
+     * Check if slot has content and trigger transition if it does
+     */
+    private _checkSlotContent = (): void => {
+      // Guard against multiple slotchange events triggering the transition multiple times
+      if (this._transitionTriggered) {
+        return;
+      }
+
+      if (this._slot) {
+        const elements = this._slot.assignedElements();
+        if (elements.length > 0) {
+          this._transitionTriggered = true;
+          this.onLoadTransition();
+        }
+      }
+    };
+
+    /**
+     * Automatically apply view transition on first render
+     * @param changedProperties - Properties that changed
+     */
+    protected firstUpdated(changedProperties: PropertyValues): void {
+      super.firstUpdated(changedProperties);
+
+      // Wait for slotted content to be ready, then trigger transition
+      // Only monitor the default (unnamed) slot - named slots are for specific purposes
+      this._slot = this.shadowRoot?.querySelector("slot:not([name])") as
+        | HTMLSlotElement
+        | undefined;
+      if (this._slot) {
+        this._checkSlotContent();
+        this._slot.addEventListener("slotchange", this._checkSlotContent);
+      } else {
+        // Start transition immediately if no slot is found
+        this.onLoadTransition();
+      }
+    }
+
+    /**
+     * Cleanup event listeners when component is removed from the DOM.
+     * Removes the slotchange listener.
+     */
+    override disconnectedCallback(): void {
+      super.disconnectedCallback();
+      if (this._slot) {
+        this._slot.removeEventListener("slotchange", this._checkSlotContent);
+        this._slot = undefined;
+        this._transitionTriggered = false;
+        this._loaded = false;
+      }
+    }
+  }
+  return ViewTransitionClass;
+};

src/panels/lovelace/hui-root.ts

@@ -72,7 +72,8 @@ 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 } from "../../resources/styles";
+import { ViewTransitionMixin } from "../../mixins/view-transition-mixin";
+import { haStyle, haStyleViewTransitions } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { showToast } from "../../util/toast";
@@ -114,7 +115,7 @@ interface SubActionItem {
 }
 
 @customElement("hui-root")
-class HUIRoot extends LitElement {
+class HUIRoot extends ViewTransitionMixin(LitElement) {
   @property({ attribute: false }) public panel?: PanelInfo<LovelacePanelConfig>;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -496,6 +497,7 @@ class HUIRoot extends LitElement {
         class=${classMap({
           "edit-mode": this._editMode,
           narrow: this.narrow,
+          loading: !this._loaded,
         })}
       >
         <div class="header">
@@ -1165,43 +1167,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);
-    }
+    this.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) {
@@ -1212,12 +1216,21 @@ class HUIRoot extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
+      haStyleViewTransitions,
       css`
         :host {
           -ms-user-select: none;
           -webkit-user-select: none;
           -moz-user-select: none;
         }
+
+        @media (prefers-reduced-motion: no-preference) {
+          ::view-transition-new(hui-root-container) {
+            animation: fade-in var(--ha-animation-layout-duration) ease-out;
+            animation-delay: var(--ha-animation-layout-delay-base);
+          }
+        }
+
         .header {
           background-color: var(--app-header-background-color);
           color: var(--app-header-text-color, white);
@@ -1406,6 +1419,10 @@ class HUIRoot extends LitElement {
           padding-right: var(--safe-area-inset-right);
           padding-inline-end: var(--safe-area-inset-right);
           padding-bottom: var(--safe-area-inset-bottom);
+          view-transition-name: hui-root-container;
+        }
+        .loading hui-view-container {
+          opacity: 0;
         }
         .narrow hui-view-container {
           padding-left: var(--safe-area-inset-left);
@@ -1414,6 +1431,7 @@ class HUIRoot extends LitElement {
         hui-view-container > * {
           flex: 1 1 100%;
           max-width: 100%;
+          view-transition-name: layout-fade-in;
         }
         /**
          * In edit mode we have the tab bar on a new line *

src/resources/styles.ts

@@ -199,3 +199,56 @@ export const baseEntrypointStyles = css`
     width: 100vw;
   }
 `;
+
+export const haStyleViewTransitions = css`
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    /* Prevent root cross-fade during view transitions (pseudo-element) */
+    ::view-transition-old(root) {
+      animation: none;
+    }
+    ::view-transition-new(root) {
+      animation: none;
+    }
+
+    /* Elements leaving the view (loading screen) */
+    ::view-transition-group(layout-fade-out) {
+      animation-duration: var(--ha-animation-layout-duration);
+      animation-timing-function: ease-out;
+    }
+    ::view-transition-old(layout-fade-out) {
+      animation: fade-out var(--ha-animation-layout-duration) ease-out;
+    }
+    ::view-transition-new(layout-fade-out) {
+      animation: none;
+    }
+
+    /* New content entering (panels, subpages)
+       Uses base delay to be less abrupt and allow for elements to render */
+    ::view-transition-group(layout-fade-in) {
+      animation-duration: var(--ha-animation-layout-duration);
+      animation-timing-function: ease-out;
+    }
+    ::view-transition-new(layout-fade-in) {
+      animation: fade-in var(--ha-animation-layout-duration) ease-out;
+      animation-delay: var(--ha-animation-layout-delay-base);
+    }
+  }
+`;

src/resources/theme/core.globals.ts

@@ -42,6 +42,17 @@ export const coreStyles = css`
     --ha-space-18: 72px;
     --ha-space-19: 76px;
     --ha-space-20: 80px;
+
+    /* Animation timing */
+    --ha-animation-layout-duration: 350ms;
+    --ha-animation-layout-delay-base: 100ms;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      --ha-animation-layout-duration: 0ms;
+      --ha-animation-layout-delay-base: 0ms;
+    }
   }
 `;
 

src/util/launch-screen.ts

@@ -3,8 +3,21 @@ import { render } from "lit";
 
 export const removeLaunchScreen = () => {
   const launchScreenElement = document.getElementById("ha-launch-screen");
-  if (launchScreenElement) {
-    launchScreenElement.parentElement!.removeChild(launchScreenElement);
+  if (!launchScreenElement?.parentElement) {
+    return;
+  }
+
+  // Use View Transition API if available and user doesn't prefer reduced motion
+  if (
+    document.startViewTransition &&
+    !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  ) {
+    document.startViewTransition(() => {
+      launchScreenElement.parentElement?.removeChild(launchScreenElement);
+    });
+  } else {
+    // Fallback: Direct removal without transition
+    launchScreenElement.parentElement.removeChild(launchScreenElement);
   }
 };