From 27e0754f5c1a45680f48679cfe3318df5c0d75aa Mon Sep 17 00:00:00 2001
From: yuhengshen <yuhengshen@qq.com>
Date: Sat, 19 Apr 2025 20:53:17 +0800
Subject: [PATCH]  fix(DropdownMenu): DropdownMenu overlay flickering (#13436)

---
 packages/vant/src/dropdown-item/DropdownItem.tsx |  1 +
 packages/vant/src/dropdown-menu/DropdownMenu.tsx |  4 ++--
 .../test/__snapshots__/index.spec.tsx.snap       | 16 ++++++++--------
 packages/vant/src/dropdown-menu/types.ts         |  2 ++
 packages/vant/src/popup/Popup.tsx                |  2 +-
 packages/vant/src/popup/README.md                |  1 +
 packages/vant/src/popup/README.zh-CN.md          |  1 +
 packages/vant/src/popup/shared.ts                |  2 ++
 8 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/vant/src/dropdown-item/DropdownItem.tsx b/packages/vant/src/dropdown-item/DropdownItem.tsx
index 95f19d9de..8aa64539e 100644
--- a/packages/vant/src/dropdown-item/DropdownItem.tsx
+++ b/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}
diff --git a/packages/vant/src/dropdown-menu/DropdownMenu.tsx b/packages/vant/src/dropdown-menu/DropdownMenu.tsx
index 3175fab9d..d68824ead 100644
--- a/packages/vant/src/dropdown-menu/DropdownMenu.tsx
+++ b/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,
diff --git a/packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap
index 53a92cb9f..603d9c1be 100644
--- a/packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap
+++ b/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"
diff --git a/packages/vant/src/dropdown-menu/types.ts b/packages/vant/src/dropdown-menu/types.ts
index c5266dc9f..902e351e0 100644
--- a/packages/vant/src/dropdown-menu/types.ts
+++ b/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;
 };
 
diff --git a/packages/vant/src/popup/Popup.tsx b/packages/vant/src/popup/Popup.tsx
index aca6e7507..a393e6106 100644
--- a/packages/vant/src/popup/Popup.tsx
+++ b/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}
diff --git a/packages/vant/src/popup/README.md b/packages/vant/src/popup/README.md
index f57e7d5a1..af060f281 100644
--- a/packages/vant/src/popup/README.md
+++ b/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` |
diff --git a/packages/vant/src/popup/README.zh-CN.md b/packages/vant/src/popup/README.zh-CN.md
index f9aff665d..52b6cff59 100644
--- a/packages/vant/src/popup/README.zh-CN.md
+++ b/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` |
diff --git a/packages/vant/src/popup/shared.ts b/packages/vant/src/popup/shared.ts
index 8ce5ac0cd..c2826a98f 100644
--- a/packages/vant/src/popup/shared.ts
+++ b/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