From c24b7f7d80064795ed7ee460a268892f1f033d87 Mon Sep 17 00:00:00 2001
From: ShuGang Zhou <zhousg1007@qq.com>
Date: Fri, 29 Sep 2023 20:40:38 +0800
Subject: [PATCH] feat(FloatingPanel): optimize bounce animate (#12317)

* feat(VantUse): add useSpring composables

* feat(VantUse): add useSpring composables

* feat(FloatingPanel): optimize bounce animate
---
 packages/vant/src/floating-panel/FloatingPanel.tsx          | 6 ++++--
 packages/vant/src/floating-panel/index.less                 | 1 +
 .../src/floating-panel/test/__snapshots__/demo.spec.ts.snap | 2 +-
 .../floating-panel/test/__snapshots__/index.spec.tsx.snap   | 4 ++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/vant/src/floating-panel/FloatingPanel.tsx b/packages/vant/src/floating-panel/FloatingPanel.tsx
index 725bff038..2751dc486 100644
--- a/packages/vant/src/floating-panel/FloatingPanel.tsx
+++ b/packages/vant/src/floating-panel/FloatingPanel.tsx
@@ -27,7 +27,7 @@ import { useSyncPropRef } from '../composables/use-sync-prop-ref';
 export const floatingPanelProps = {
   height: makeNumericProp(0),
   anchors: makeArrayProp<number>(),
-  duration: makeNumericProp(0.2),
+  duration: makeNumericProp(0.3),
   contentDraggable: truthProp,
   lockScroll: Boolean,
   safeAreaInsetBottom: truthProp,
@@ -71,7 +71,9 @@ export default defineComponent({
     const rootStyle = computed(() => ({
       height: addUnit(boundary.value.max),
       transform: `translateY(calc(100% + ${addUnit(-height.value)}))`,
-      transition: !dragging.value ? `transform ${props.duration}s` : 'none',
+      transition: !dragging.value
+        ? `transform ${props.duration}s cubic-bezier(0.18, 0.89, 0.32, 1.28)`
+        : 'none',
     }));
 
     const ease = (moveY: number): number => {
diff --git a/packages/vant/src/floating-panel/index.less b/packages/vant/src/floating-panel/index.less
index b46577a2d..d7036e2bd 100644
--- a/packages/vant/src/floating-panel/index.less
+++ b/packages/vant/src/floating-panel/index.less
@@ -20,6 +20,7 @@
   border-top-left-radius: var(--van-floating-panel-border-radius);
   border-top-right-radius: var(--van-floating-panel-border-radius);
   background: var(--van-floating-panel-background);
+  will-change: transform;
 
   &::after {
     content: '';
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 20ff62811..909cbeb57 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
@@ -62,7 +62,7 @@ exports[`should render demo and match snapshot 1`] = `
     >
       <div
         class="van-floating-panel van-safe-area-bottom"
-        style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;"
+        style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
       >
         <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 d120ac11f..2ba52dd15 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
@@ -3,7 +3,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 0.2s;"
+  style="height: 400px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
 >
   <div class="van-floating-panel__header">
     <div class="van-floating-panel__header-bar">
@@ -18,7 +18,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 0.2s;"
+  style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
 >
   <div class="van-floating-panel__header">
     <div class="van-floating-panel__header-bar">