+
@@ -235,6 +255,26 @@ export class TopAppBarBaseBase extends BaseElement {
super.firstUpdated();
this.updateRootPosition();
this.registerListeners();
+
+ // Wait for slotted content to be ready for view transition
+ const slot = this.shadowRoot?.querySelector("slot:not([name])");
+ if (slot) {
+ const checkContent = () => {
+ const nodes = (slot as HTMLSlotElement).assignedNodes({
+ flatten: true,
+ });
+ if (nodes.length > 0) {
+ this.onLoadTransition();
+ }
+ };
+ // Check immediately in case content is already there
+ checkContent();
+ // Also listen for slotchange
+ slot.addEventListener("slotchange", checkContent, { once: true });
+ } else {
+ // No slot, just trigger immediately
+ this.onLoadTransition();
+ }
}
override disconnectedCallback() {
@@ -245,6 +285,7 @@ export class TopAppBarBaseBase extends BaseElement {
static override styles = [
styles,
haStyleScrollbar,
+ haStyleViewTransitions,
css`
header {
padding-top: var(--safe-area-inset-top);
@@ -341,6 +382,11 @@ export class TopAppBarBaseBase extends BaseElement {
.mdc-top-app-bar--pane .content {
height: 100%;
overflow: auto;
+ view-transition-name: layout-fade-in;
+ transition: opacity var(--ha-animation-layout-duration) ease-out;
+ }
+ .content.loading {
+ opacity: 0;
}
.mdc-top-app-bar__title {
font-size: var(--ha-font-size-xl);
diff --git a/src/layouts/hass-router-page.ts b/src/layouts/hass-router-page.ts
index 0b3eee8ab8..847a88b987 100644
--- a/src/layouts/hass-router-page.ts
+++ b/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,19 @@ 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);
+ (panelEl as HTMLElement).style.viewTransitionName = "layout-fade-in";
+ this.updatePageEl(panelEl);
+ this.appendChild(panelEl);
- if (routerOptions.cacheAll || routeOptions.cache) {
- this._cache[page] = panelEl;
- }
+ if (routerOptions.cacheAll || routeOptions.cache) {
+ this._cache[page] = panelEl;
+ }
+ });
}
}
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 5defc16322..280f1da897 100644
--- a/src/layouts/hass-subpage.ts
+++ b/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 { customElement, eventOptions, property, state } 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;
@@ -24,9 +26,46 @@ class HassSubpage extends LitElement {
@property({ type: Boolean }) public supervisor = false;
+ @state() private _loaded = false;
+
// @ts-ignore
@restoreScroll(".content") private _savedScrollPos?: number;
+ protected onLoadTransition(): void {
+ // Trigger the transition when content is slotted
+ this.startViewTransition(() => {
+ this._loaded = true;
+ });
+ }
+
+ protected override enableLoadTransition(): boolean {
+ // Disable automatic transition, we'll trigger it manually
+ return false;
+ }
+
+ protected override firstUpdated(changedProps) {
+ super.firstUpdated(changedProps);
+ // Wait for slotted content to be ready
+ const slot = this.shadowRoot?.querySelector("slot:not([name])");
+ if (slot) {
+ const checkContent = () => {
+ const nodes = (slot as HTMLSlotElement).assignedNodes({
+ flatten: true,
+ });
+ if (nodes.length > 0) {
+ this.onLoadTransition();
+ }
+ };
+ // Check immediately in case content is already there
+ checkContent();
+ // Also listen for slotchange
+ slot.addEventListener("slotchange", checkContent, { once: true });
+ } else {
+ // No slot, just trigger immediately
+ this.onLoadTransition();
+ }
+ }
+
protected render(): TemplateResult {
return html`