feat: add vertical transition styles to master-detail-layout (#8866)

web-padawan · web-flow · commit cc21981c2353 · 2025-03-27T10:08:15.000+02:00
diff --git a/dev/master-detail-layout.html b/dev/master-detail-layout.html
@@ -34,6 +34,14 @@
       vaadin-master-detail-layout[orientation='vertical'][overlay]::part(detail) {
         border-block-start: solid 1px #ccc;
       }
+
+      vaadin-master-detail-layout[orientation='horizontal'] > [slot='detail'] {
+        width: var(--detail-size);
+      }
+
+      vaadin-master-detail-layout[orientation='vertical'] > [slot='detail'] {
+        height: var(--detail-size);
+      }
     </style>
 
     <p>
@@ -120,18 +128,18 @@
       });
 
       document.querySelector('#stack').addEventListener('change', (e) => {
-        layout.stackThreshold = e.target.checked ? '30rem' : null;
+        layout.stackThreshold = e.target.checked ? '600px' : null;
       });
 
       document.querySelector('#set-small-detail').addEventListener('click', () => {
         const detail = document.createElement('detail-content');
-        detail.style.width = '200px';
+        detail.style.setProperty('--detail-size', '200px');
         layout.setDetail(detail);
       });
 
       document.querySelector('#set-large-detail').addEventListener('click', () => {
         const detail = document.createElement('detail-content');
-        detail.style.width = '600px';
+        detail.style.setProperty('--detail-size', '600px');
         layout.setDetail(detail);
       });
 
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
@@ -109,4 +109,108 @@ export const transitionStyles = css`
       opacity: 0;
     }
   }
+
+  /* Overlay - vertical - add */
+
+  vaadin-master-detail-layout[overlay][orientation='vertical'][transition='add']::part(detail) {
+    view-transition-name: vaadin-master-detail-layout-overlay-vertical-detail-add;
+  }
+
+  ::view-transition-group(vaadin-master-detail-layout-overlay-vertical-detail-add) {
+    clip-path: inset(0);
+  }
+
+  ::view-transition-new(vaadin-master-detail-layout-overlay-vertical-detail-add) {
+    animation: 300ms ease both vaadin-master-detail-layout-overlay-vertical-detail-add;
+  }
+
+  @keyframes vaadin-master-detail-layout-overlay-vertical-detail-add {
+    from {
+      transform: translateY(100%);
+    }
+  }
+
+  /* Overlay - vertical - remove */
+
+  vaadin-master-detail-layout[overlay][orientation='vertical'][transition='remove']::part(detail) {
+    view-transition-name: vaadin-master-detail-layout-overlay-vertical-detail-remove;
+  }
+
+  ::view-transition-group(vaadin-master-detail-layout-overlay-vertical-detail-remove) {
+    clip-path: inset(0);
+  }
+
+  ::view-transition-old(vaadin-master-detail-layout-overlay-vertical-detail-remove) {
+    animation: 300ms ease both vaadin-master-detail-layout-overlay-vertical-detail-remove;
+  }
+
+  @keyframes vaadin-master-detail-layout-overlay-vertical-detail-remove {
+    to {
+      transform: translateY(100%);
+    }
+  }
+
+  /* Stack - vertical - add */
+
+  vaadin-master-detail-layout[stack][orientation='vertical'][transition='add'] {
+    view-transition-name: vaadin-master-detail-layout-stack-vertical-add;
+  }
+
+  ::view-transition-group(vaadin-master-detail-layout-stack-vertical-add) {
+    clip-path: inset(0);
+  }
+
+  ::view-transition-new(vaadin-master-detail-layout-stack-vertical-add) {
+    animation: 300ms ease both vaadin-master-detail-layout-stack-vertical-add-new;
+  }
+
+  ::view-transition-old(vaadin-master-detail-layout-stack-vertical-add) {
+    animation: 300ms ease both vaadin-master-detail-layout-stack-vertical-add-old;
+  }
+
+  @keyframes vaadin-master-detail-layout-stack-vertical-add-new {
+    from {
+      transform: translateY(100px);
+      opacity: 0;
+    }
+  }
+
+  @keyframes vaadin-master-detail-layout-stack-vertical-add-old {
+    to {
+      transform: translateY(-100px);
+      opacity: 0;
+    }
+  }
+
+  /* Stack - vertical - remove */
+
+  vaadin-master-detail-layout[stack][orientation='vertical'][transition='remove'] {
+    view-transition-name: vaadin-master-detail-layout-stack-vertical-remove;
+  }
+
+  ::view-transition-group(vaadin-master-detail-layout-stack-vertical-remove) {
+    clip-path: inset(0);
+  }
+
+  ::view-transition-new(vaadin-master-detail-layout-stack-vertical-remove) {
+    animation: 300ms ease both vaadin-master-detail-layout-stack-vertical-remove-new;
+  }
+
+  ::view-transition-old(vaadin-master-detail-layout-stack-vertical-remove) {
+    animation: 300ms ease both vaadin-master-detail-layout-stack-vertical-remove-old;
+  }
+
+  @keyframes vaadin-master-detail-layout-stack-vertical-remove-new {
+    from {
+      transform: translateY(-100px);
+      opacity: 0;
+    }
+  }
+
+  @keyframes vaadin-master-detail-layout-stack-vertical-remove-old {
+    to {
+      transform: translateY(100px);
+      opacity: 0;
+    }
+  }
 `;
