feat: add noAnimation property to master-detail-layout (#8865)

web-padawan · web-flow · commit 64f83b698305 · 2025-03-27T10:07:41.000+02:00
diff --git a/packages/master-detail-layout/src/vaadin-master-detail-layout.d.ts b/packages/master-detail-layout/src/vaadin-master-detail-layout.d.ts
@@ -108,6 +108,13 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
    */
   stackThreshold: string | null | undefined;
 
+  /**
+   * When true, the layout does not use animated transitions for the detail area.
+   *
+   * @attr {boolean} no-animation
+   */
+  noAnimation: boolean;
+
   /**
    * Sets the detail element to be displayed in the detail area and starts a
    * view transition that animates adding, replacing or removing the detail
diff --git a/packages/master-detail-layout/src/vaadin-master-detail-layout.js b/packages/master-detail-layout/src/vaadin-master-detail-layout.js
@@ -304,6 +304,16 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
         sync: true,
       },
 
+      /**
+       * When true, the layout does not use animated transitions for the detail area.
+       *
+       * @attr {boolean} no-animation
+       */
+      noAnimation: {
+        type: Boolean,
+        value: false,
+      },
+
       /**
        * When true, the component uses the overlay mode. This property is read-only.
        * In order to enforce the overlay mode, use `forceOverlay` property.
@@ -545,7 +555,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
       }
     };
 
-    if (typeof document.startViewTransition === 'function') {
+    if (typeof document.startViewTransition === 'function' && !this.noAnimation) {
       const hasDetail = !!currentDetail;
       const transitionType = hasDetail && element ? 'replace' : hasDetail ? 'remove' : 'add';
       this.setAttribute('transition', transitionType);
diff --git a/packages/master-detail-layout/test/typings/master-detail-layout.types.ts b/packages/master-detail-layout/test/typings/master-detail-layout.types.ts
@@ -18,3 +18,4 @@ assertType<string | null | undefined>(layout.masterMinSize);
 assertType<'horizontal' | 'vertical'>(layout.orientation);
 assertType<boolean>(layout.forceOverlay);
 assertType<string | null | undefined>(layout.stackThreshold);
+assertType<boolean>(layout.noAnimation);
diff --git a/packages/master-detail-layout/test/view-transitions.test.js b/packages/master-detail-layout/test/view-transitions.test.js
@@ -136,4 +136,21 @@ describe('View transitions', () => {
       expect(layout.hasAttribute('transition')).to.be.false;
     });
   });
+
+  describe('noAnimation', () => {
+    it('should not start view transition when noAnimation is set to true', async () => {
+      layout.noAnimation = true;
+
+      const detail = document.createElement('detail-content');
+      await layout.setDetail(detail);
+
+      expect(startViewTransitionSpy.called).to.be.false;
+
+      layout.noAnimation = false;
+
+      await layout.setDetail(null);
+
+      expect(startViewTransitionSpy.calledOnce).to.be.true;
+    });
+  });
 });
