feat(FloatingPanel): add duration prop (#11964)

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 => {

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` |
 

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` |
 

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">

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">