fix(DropdownMenu): DropdownMenu overlay flickering (#13436)

packages/vant/src/dropdown-item/DropdownItem.tsx

@@ -211,6 +211,7 @@ export default defineComponent({
             role="menu"
             class={bem('content')}
             overlay={overlay}
+            disableOverlayTransition={parent.opened.value}
             position={direction === 'down' ? 'top' : 'bottom'}
             duration={state.transition ? duration : 0}
             lazyRender={props.lazyRender}

packages/vant/src/dropdown-menu/DropdownMenu.tsx

@@ -157,8 +157,8 @@ export default defineComponent({
       );
     };
 
-    useExpose({ close });
-    linkChildren({ id, props, offset, updateOffset });
+    useExpose({ close, opened });
+    linkChildren({ id, props, offset, opened, updateOffset });
     useClickAway(root, onClickAway);
     useEventListener('scroll', onScroll, {
       target: scrollParent,

packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap

@@ -41,7 +41,7 @@ exports[`click option 1`] = `
       css="true"
     >
       <div
-        style="z-index: 2007; position: absolute; animation-duration: 0.2s; display: none;"
+        style="z-index: 2007; position: absolute; animation-duration: 0s; display: none;"
         class="van-overlay"
         role="button"
         tabindex="0"
@@ -156,7 +156,7 @@ exports[`close-on-click-outside 1`] = `
       css="true"
     >
       <div
-        style="z-index: 2004; position: absolute; animation-duration: 0.2s; display: none;"
+        style="z-index: 2004; position: absolute; animation-duration: 0s; display: none;"
         class="van-overlay"
         role="button"
         tabindex="0"
@@ -381,7 +381,7 @@ exports[`direction up 2`] = `
       css="true"
     >
       <div
-        style="z-index: 2006; position: absolute; animation-duration: 0.2s;"
+        style="z-index: 2006; position: absolute; animation-duration: 0s;"
         class="van-overlay"
         role="button"
         tabindex="0"
@@ -496,7 +496,7 @@ exports[`disable close-on-click-outside 1`] = `
       css="true"
     >
       <div
-        style="z-index: 2005; position: absolute; animation-duration: 0.2s;"
+        style="z-index: 2005; position: absolute; animation-duration: 0s;"
         class="van-overlay"
         role="button"
         tabindex="0"
@@ -649,7 +649,7 @@ exports[`render option icon 1`] = `
       css="true"
     >
       <div
-        style="z-index: 2003; position: absolute; animation-duration: 0.2s;"
+        style="z-index: 2003; position: absolute; animation-duration: 0s;"
         class="van-overlay"
         role="button"
         tabindex="0"
@@ -768,7 +768,7 @@ exports[`show dropdown item 1`] = `
       css="true"
     >
       <div
-        style="z-index: 2001; position: absolute; animation-duration: 0.2s;"
+        style="z-index: 2001; position: absolute; animation-duration: 0s;"
         class="van-overlay"
         role="button"
         tabindex="0"
@@ -946,7 +946,7 @@ exports[`show dropdown item 2`] = `
       css="true"
     >
       <div
-        style="z-index: 2002; position: absolute; animation-duration: 0.2s;"
+        style="z-index: 2002; position: absolute; animation-duration: 0s;"
         class="van-overlay"
         role="button"
         tabindex="0"
@@ -1105,7 +1105,7 @@ exports[`show dropdown item 3`] = `
       css="true"
     >
       <div
-        style="z-index: 2002; position: absolute; animation-duration: 0.2s; display: none;"
+        style="z-index: 2002; position: absolute; animation-duration: 0s; display: none;"
         class="van-overlay"
         role="button"
         tabindex="0"

packages/vant/src/dropdown-menu/types.ts

@@ -7,10 +7,12 @@ export type DropdownMenuProvide = {
   id: string;
   props: DropdownMenuProps;
   offset: Ref<number>;
+  opened: Ref<boolean>;
   updateOffset: () => void;
 };
 
 export type DropdownMenuExpose = {
+  opened: Ref<boolean>;
   close: () => void;
 };
 

packages/vant/src/popup/Popup.tsx

@@ -141,7 +141,7 @@ export default defineComponent({
             show={props.show}
             class={props.overlayClass}
             zIndex={zIndex.value}
-            duration={props.duration}
+            duration={props.disableOverlayTransition ? 0 : props.duration}
             customStyle={props.overlayStyle}
             role={props.closeOnClickOverlay ? 'button' : undefined}
             tabindex={props.closeOnClickOverlay ? 0 : undefined}

packages/vant/src/popup/README.md

@@ -227,6 +227,7 @@ Use `teleport` prop to specify mount location.
 | z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` |
 | round | Whether to show round corner | _boolean_ | `false` |
 | destroy-on-close `v4.9.10` | Whether to destroy content when closed | _boolean_ | `false` |
+| disableOverlayTransition | Whether to disable overlay transition | _boolean_ | `false` |
 | lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
 | lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
 | close-on-popstate | Whether to close when popstate | _boolean_ | `false` |

packages/vant/src/popup/README.zh-CN.md

@@ -229,6 +229,7 @@ export default {
 | z-index | 将弹窗的 z-index 层级设置为一个固定值 | _number \| string_ | `2000+` |
 | round | 是否显示圆角 | _boolean_ | `false` |
 | destroy-on-close `v4.9.10` | 是否在关闭时销毁内容 | _boolean_ | `false` |
+| disableOverlayTransition | 是否禁用遮罩层动画 | _boolean_ | `false` |
 | lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
 | lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
 | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `false` |

packages/vant/src/popup/shared.ts

@@ -10,6 +10,8 @@ export const popupSharedProps = {
   overlay: truthProp,
   // transition duration
   duration: numericProp,
+  // disable overlay transition
+  disableOverlayTransition: Boolean,
   // teleport
   teleport: [String, Object] as PropType<TeleportProps['to']>,
   // prevent body scroll