feat: add transitions for stack mode and viewport containment (#8903)

sissbruecker · web-flow · commit b91adb449fd8 · 2025-04-03T10:35:56.000+03:00
diff --git a/packages/master-detail-layout/src/vaadin-master-detail-layout-transition-styles.js b/packages/master-detail-layout/src/vaadin-master-detail-layout-transition-styles.js
@@ -133,6 +133,28 @@ export const transitionStyles = css`
     }
   }
 
+  /* Stack - horizontal - viewport - add */
+
+  vaadin-master-detail-layout[stack][orientation='horizontal'][containment='viewport'][transition='add'] {
+    view-transition-name: vaadin-master-detail-layout-stack-horizontal-viewport-add;
+  }
+
+  ::view-transition-new(vaadin-master-detail-layout-stack-horizontal-viewport-add) {
+    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
+      vaadin-master-detail-layout-stack-horizontal-add-new;
+  }
+
+  /* Stack - horizontal - viewport - remove */
+
+  vaadin-master-detail-layout[stack][orientation='horizontal'][containment='viewport'][transition='remove'] {
+    view-transition-name: vaadin-master-detail-layout-stack-horizontal-viewport-remove;
+  }
+
+  ::view-transition-old(vaadin-master-detail-layout-stack-horizontal-viewport-remove) {
+    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
+      vaadin-master-detail-layout-stack-horizontal-remove-old;
+  }
+
   /* Overlay - vertical - add */
 
   vaadin-master-detail-layout[overlay][orientation='vertical'][transition='add']::part(detail) {
@@ -242,4 +264,26 @@ export const transitionStyles = css`
       opacity: 0;
     }
   }
+
+  /* Stack - vertical - viewport - add */
+
+  vaadin-master-detail-layout[stack][orientation='vertical'][containment='viewport'][transition='add'] {
+    view-transition-name: vaadin-master-detail-layout-stack-vertical-viewport-add;
+  }
+
+  ::view-transition-new(vaadin-master-detail-layout-stack-vertical-viewport-add) {
+    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
+      vaadin-master-detail-layout-stack-vertical-add-new;
+  }
+
+  /* Stack - vertical - viewport - remove */
+
+  vaadin-master-detail-layout[stack][orientation='vertical'][containment='viewport'][transition='remove'] {
+    view-transition-name: vaadin-master-detail-layout-stack-vertical-viewport-remove;
+  }
+
+  ::view-transition-old(vaadin-master-detail-layout-stack-vertical-viewport-remove) {
+    animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
+      vaadin-master-detail-layout-stack-vertical-remove-old;
+  }
 `;
