From c8983b394622e8b27532bbe2975efc46d72056cb Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sun, 11 Jun 2023 22:23:05 +0800
Subject: [PATCH] feat(FloatingPanel): add duration prop (#11964)

---
 packages/vant/src/floating-panel/FloatingPanel.tsx         | 7 ++++---
 packages/vant/src/floating-panel/README.md                 | 1 +
 packages/vant/src/floating-panel/README.zh-CN.md           | 1 +
 .../floating-panel/test/__snapshots__/demo.spec.ts.snap    | 2 +-
 .../floating-panel/test/__snapshots__/index.spec.tsx.snap  | 4 ++--
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/vant/src/floating-panel/FloatingPanel.tsx b/packages/vant/src/floating-panel/FloatingPanel.tsx
index 4c691f15f..1d39faf3a 100644
--- a/packages/vant/src/floating-panel/FloatingPanel.tsx
+++ b/packages/vant/src/floating-panel/FloatingPanel.tsx
@@ -24,9 +24,10 @@ import { useSyncPropRef } from '../composables/use-sync-prop-ref';
 const { height: windowHeight } = useWindowSize();
 
 export const floatingPanelProps = {
-  anchors: makeArrayProp<number>(),
-  contentDraggable: truthProp,
   height: makeNumericProp(0),
+  anchors: makeArrayProp<number>(),
+  duration: makeNumericProp(0.2),
+  contentDraggable: truthProp,
   safeAreaInsetBottom: truthProp,
 };
 
@@ -69,7 +70,7 @@ export default defineComponent({
     const rootStyle = computed(() => ({
       height: addUnit(boundary.value.max),
       transform: `translateY(calc(100% + ${addUnit(-height.value)}))`,
-      transition: !dragging.value ? 'transform .3s' : 'none',
+      transition: !dragging.value ? `transform ${props.duration}s` : 'none',
     }));
 
     const ease = (moveY: number): number => {
diff --git a/packages/vant/src/floating-panel/README.md b/packages/vant/src/floating-panel/README.md
index 81a186578..86625e8bb 100644
--- a/packages/vant/src/floating-panel/README.md
+++ b/packages/vant/src/floating-panel/README.md
@@ -86,6 +86,7 @@ By default, both the header and content areas of FloatingPanel can be dragged, b
 | --- | --- | --- | --- |
 | v-model:height | The current display height of the panel | _number \| string_ | `0` |
 | anchors | Setting custom anchors, unit `px` | _number[]_ | `[100, window.innerWidth * 0.6]` |
+| duration | Transition duration, unit second | _number \| string_ | `0.3` |
 | content-draggable | Allow dragging content | _boolean_ | `true` |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
 
diff --git a/packages/vant/src/floating-panel/README.zh-CN.md b/packages/vant/src/floating-panel/README.zh-CN.md
index 1bd1a434a..0533e7490 100644
--- a/packages/vant/src/floating-panel/README.zh-CN.md
+++ b/packages/vant/src/floating-panel/README.zh-CN.md
@@ -86,6 +86,7 @@ export default {
 | --- | --- | --- | --- |
 | v-model:height | 当前面板的显示高度 | _number \| string_ | `0` |
 | anchors | 设置自定义锚点, 单位 `px` | _number[]_ | `[100, window.innerWidth * 0.6]` |
+| duration | 动画时长，单位秒，设置为 0 可以禁用动画 | _number \| string_ | `0.3` |
 | content-draggable | 允许拖拽内容容器 | _boolean_ | `true` |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
 
diff --git a/packages/vant/src/floating-panel/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/floating-panel/test/__snapshots__/demo.spec.ts.snap
index d773145fa..cdd51a08e 100644
--- a/packages/vant/src/floating-panel/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/floating-panel/test/__snapshots__/demo.spec.ts.snap
@@ -55,7 +55,7 @@ exports[`should render demo and match snapshot 1`] = `
          style
     >
       <div class="van-floating-panel van-safe-area-bottom"
-           style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform .3s;"
+           style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;"
       >
         <div class="van-floating-panel__header">
           <div class="van-floating-panel__header-bar">
diff --git a/packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap
index 6737725fb..20658ed43 100644
--- a/packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should drag adsorption effect when anchors props is [100, 200, 400] 1`] = `
 <div class="van-floating-panel van-safe-area-bottom"
-     style="height: 400px; transform: translateY(calc(100% + -100px)); transition: transform .3s;"
+     style="height: 400px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;"
 >
   <div class="van-floating-panel__header">
     <div class="van-floating-panel__header-bar">
@@ -16,7 +16,7 @@ exports[`should drag adsorption effect when anchors props is [100, 200, 400] 1`]
 
 exports[`should minHeight 100 and maxHeight 0.6 innerHeight when anchors props do not 1`] = `
 <div class="van-floating-panel van-safe-area-bottom"
-     style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform .3s;"
+     style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;"
 >
   <div class="van-floating-panel__header">
     <div class="van-floating-panel__header-bar">