fix: popUp、calendar、collapse等组件动画整体优化

AntmJS · Nov 4, 2022 · e488a6a · e488a6a
1 parent b5812c5
commit e488a6a
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 24 deletions.
diff --git a/packages/vantui/package.json b/packages/vantui/package.json
@@ -50,6 +50,7 @@
     "@vant/icons": "^1.7.1",
     "classnames": "^2.3.1",
     "dayjs": "^1.10.6",
+    "raf": "^3.4.1",
     "rc-util": "^5.14.0",
     "use-deep-compare-effect": "^1.8.1"
   },

diff --git a/packages/vantui/src/calendar/index.tsx b/packages/vantui/src/calendar/index.tsx
@@ -397,12 +397,12 @@ function Index(
   useEffect(
     function () {
       if (show || !poppable) {
-        setTimeout(() => {
+        requestAnimationFrame(() => {
           initRect()
           setTimeout(() => {
             scrollIntoViewFn()
           }, 66)
-        }, 66)
+        })
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -424,7 +424,7 @@ function Index(
   })
 
   return (
-    <>
+    <View>
       {poppable ? (
         <VanPopup
           className={'van-calendar__popup--' + position}
@@ -594,7 +594,7 @@ function Index(
         </View>
       )}
       <VanToast id="van-toast"></VanToast>
-    </>
+    </View>
   )
 }
 

diff --git a/packages/vantui/src/collapse-item/animate.ts b/packages/vantui/src/collapse-item/animate.ts
@@ -1,4 +1,4 @@
-import { createAnimation } from '@tarojs/taro'
+import { createAnimation, nextTick } from '@tarojs/taro'
 // import { canIUseAnimate } from '../common/version'
 import { getRect } from '../common/utils'
 // function useAnimate(context: any, expanded: any, mounted: any, height: any) {
@@ -60,14 +60,13 @@ function useAnimation(expanded: any, mounted: any, height: any, setState: any) {
       duration: 300,
     })
     const animationclass = animation.export()
-    setState?.((state: any) => {
-      return {
-        ...state,
-        animation:
-          process.env.TARO_ENV === 'h5'
-            ? `${animationclass}--1`
-            : animationclass,
-      }
+    nextTick(() => {
+      setState?.((state: any) => {
+        return {
+          ...state,
+          animation: animationclass,
+        }
+      })
     })
   }
 }

diff --git a/packages/vantui/src/common/utils.ts b/packages/vantui/src/common/utils.ts
@@ -2,8 +2,10 @@ import Taro, {
   getSystemInfoSync as TaroGetSystemInfoSync,
   createSelectorQuery,
 } from '@tarojs/taro'
+import * as raf from 'raf'
 import { isDef, isPlainObject, isPromise } from './validator'
 import { canIUseNextTick } from './version'
+
 export { isDef } from './validator'
 export function range(num: any, min: any, max: any) {
   return Math.min(Math.max(num, min), max)
@@ -40,18 +42,11 @@ export function addUnit(value: any) {
   return /^-?\d+(\.\d+)?$/.test('' + value) ? Taro.pxTransform(value) : value
 }
 export function requestAnimationFrame(cb: any) {
-  const systemInfo = getSystemInfoSync()
-  if (systemInfo.platform === 'devtools') {
-    return setTimeout(() => {
-      cb()
-    }, 33.333333333333336)
+  if (window.requestAnimationFrame) {
+    return window.requestAnimationFrame(cb)
   }
-  return createSelectorQuery()
-    .selectViewport()
-    .boundingClientRect()
-    .exec(() => {
-      cb()
-    })
+
+  return raf.default(cb)
 }
 export function pickExclude(obj: any, keys: any) {
   if (!isPlainObject(obj)) {

diff --git a/yarn.lock b/yarn.lock
@@ -14364,6 +14364,13 @@ quick-lru@^4.0.1:
   resolved "https://registry.npmmirror.com/quick-lru/-/quick-lru-4.0.1.tgz"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz"