fix(AnimatingNumbers): 多端适配

src/config.json

@@ -902,7 +902,7 @@
           "author": "swag~jun"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "AnimatingNumbers",
           "type": "component",
           "cName": "数字动画",

src/packages/animatingnumbers/__tests__/animatingnumbers.spec.tsx

@@ -8,15 +8,12 @@ test('test value props', () => {
   const { container } = render(<AnimatingNumbers.CountUp value="678.94" />)
 
   const listNumbers = container.querySelectorAll('.nut-countup-number')
-  expect(listNumbers[0]).toHaveAttribute(
-    'style',
-    'transition: transform 1s ease-in-out;'
-  )
+  expect(listNumbers[0]).toHaveAttribute('style', 'transition-duration: 1s;')
   const defaultDelay = 300
   vi.advanceTimersByTime(defaultDelay)
   expect(listNumbers[0]).toHaveAttribute(
     'style',
-    'transition: transform 1s ease-in-out; transform: translate(0, -30%);'
+    'transition-duration: 1s; transform: translate(0, -30%);'
   )
   expect(listNumbers.length).toBe(5)
 })
@@ -32,7 +29,7 @@ test('test aysnc value and  duration props', async () => {
   vi.advanceTimersByTime(defaultDelay)
   expect(listNumbers[0]).toHaveAttribute(
     'style',
-    'transition: transform 1.2s ease-in-out; transform: translate(0, -50%);'
+    'transition-duration: 1.2s; transform: translate(0, -50%);'
   )
 
   for (let i = 0; i < 5; i++) {
@@ -45,7 +42,7 @@ test('test aysnc value and  duration props', async () => {
     const lastlen = value.length - 1
     const lastNumber = Number(value.slice(lastlen))
     const percentage = lastNumber === 0 ? 50 : 5 * lastNumber
-    const style = `transition: transform 0s ease-in-out; transform: translate(${0}, -${percentage}%);`
+    const style = `transition-duration: 0s; transform: translate(${0}, -${percentage}%);`
     expect(listNumbers2[7]).toHaveAttribute('style', style)
   }
 })

src/packages/animatingnumbers/animatingnumbers.harmony.css

@@ -0,0 +1,41 @@
+.nut-countup-list {
+  display: inline-flex;
+  height: 32px;
+  overflow: hidden;
+  direction: ltr;
+}
+.nut-countup-listitem {
+  height: 32px;
+  overflow: hidden;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.nut-countup-listitem-number {
+  margin: 0 0;
+  border-radius: 4px;
+  color: #1a1a1a;
+  background-color: inherit;
+}
+.nut-countup-separator {
+  display: flex;
+  height: 80%;
+  align-items: flex-end;
+  color: inherit;
+  font-size: 18px;
+  font-weight: 600;
+}
+.nut-countup-number {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: auto;
+  transition: transform 1s ease-in-out;
+  transform: translate(0, 0);
+}
+.nut-countup-number-text {
+  height: 32px;
+  line-height: 32px;
+  color: #1a1a1a;
+  font-size: 18px;
+  font-weight: 600;
+}

src/packages/animatingnumbers/countup.scss

@@ -9,9 +9,8 @@
   &-listitem {
     height: $countup-height;
     overflow: hidden;
-    color: $color-title;
-    font-size: $countup-base-size;
-    font-weight: $font-weight-bold;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
 
     &-number {
       margin: 0 $countup-lr-margin;
@@ -26,17 +25,24 @@
     height: 80%;
     align-items: flex-end;
     color: $countup-bg-color;
+    font-size: $countup-base-size;
+    font-weight: $font-weight-bold;
   }
 
   &-number {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: $countup-width;
+    transition: transform 1s ease-in-out;
+    transform: translate(0, 0);
 
-    span {
+    &-text {
       height: $countup-height;
       line-height: $countup-height;
+      color: $countup-color;
+      font-size: $countup-base-size;
+      font-weight: $font-weight-bold;
     }
   }
 }

src/packages/animatingnumbers/countup.taro.tsx

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { createSelectorQuery } from '@tarojs/taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { mergeProps } from '@/utils/merge-props'
@@ -39,7 +39,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
   } = mergeProps(defaultProps, props)
   const classPrefix = 'nut-countup'
   const countupRef = useRef<HTMLDivElement>(null)
-  const timerRef = useRef(0)
+  const timerRef = useRef()
   const numbers = Array.from({ length: 10 }, (v, i) => i)
 
   const getShowNumber = useCallback(() => {
@@ -54,65 +54,66 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     return currNumber.split('')
   }, [length, thousands, value])
 
-  const [numerArr, setNumerArr] = useState<string[]>([])
-  const [transformArr, setTransformArr] = useState<Array<string>>([])
+  const [numberArr, setNumberArr] = useState<string[]>([])
+  const [transformArr, setTransformArr] = useState<CSSProperties[]>([])
   const isLoaded = useRef(false)
 
   const setNumberTransform = useCallback(() => {
-    if (countupRef.current && numerArr.length) {
+    if (countupRef.current && numberArr.length) {
       createSelectorQuery()
         .selectAll('.nut-countup-listitem')
         .node((numberItems: any) => {
-          const transformArrCache: string[] = []
+          const transformArrCache: CSSProperties[] = []
           Object.keys(numberItems).forEach((key: any) => {
             const elem = numberItems[Number(key)] as HTMLElement
-            const idx = Number(numerArr[Number(key)])
-            if (elem) {
+            const idx = Number(numberArr[Number(key)])
+            const enabled =
+              elem && typeof idx === 'number' && !Number.isNaN(idx)
+            if (enabled) {
               // 计算规则：父元素和实际列表高度的百分比，分割成20等份
               const transform =
                 idx || idx === 0
                   ? `translate(0, -${(idx === 0 ? 10 : idx) * 5}%)`
                   : ''
-              transformArrCache.push(transform)
+              transformArrCache.push({
+                transitionDuration: `${duration}s`,
+                transform,
+              } as CSSProperties)
             }
           })
           setTransformArr([...transformArrCache])
         })
         .exec()
     }
-  }, [numerArr])
-
-  const numberEaseStyle = (idx: number) => {
-    return {
-      transition: `transform ${duration}s ease-in-out`,
-      transform: transformArr[idx] ? transformArr[idx] : null,
-    } as CSSProperties
-  }
-
-  useEffect(() => {
-    setNumberTransform()
-  }, [numerArr, setNumberTransform])
+  }, [numberArr])
 
   useEffect(() => {
-    if (!isLoaded.current) {
-      isLoaded.current = true
-      timerRef.current = window.setTimeout(() => {
-        setNumerArr(getShowNumber())
-      }, delay)
-    } else {
-      setNumerArr(getShowNumber())
+    if (numberArr.length) {
+      if (!isLoaded.current) {
+        isLoaded.current = true
+        timerRef.current = setTimeout(() => {
+          setNumberTransform()
+        }, delay)
+      } else {
+        setNumberTransform()
+      }
     }
     return () => {
-      window.clearTimeout(timerRef.current)
+      clearTimeout(timerRef.current)
+      isLoaded.current = false
     }
-  }, [value, delay, getShowNumber])
+  }, [numberArr, delay, setNumberTransform])
+
+  useEffect(() => {
+    setNumberArr(getShowNumber())
+  }, [value, getShowNumber])
 
   return (
-    <View className={`${classPrefix} ${className}`} ref={countupRef}>
-      <ul className={`${classPrefix}-list`}>
-        {numerArr.map((item: string, idx: number) => {
+    <View className={`${classPrefix} ${className}`} ref={countupRef} {...rest}>
+      <View className={`${classPrefix}-list`}>
+        {numberArr.map((item: string, idx: number) => {
           return (
-            <li
+            <View
               className={`${classPrefix}-listitem ${
                 !Number.isNaN(Number(item))
                   ? `${classPrefix}-listitem-number`
@@ -121,21 +122,28 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
               key={idx}
             >
               {!Number.isNaN(Number(item)) ? (
-                <span
+                <View
                   className={`${classPrefix}-number`}
-                  style={numberEaseStyle(idx)}
+                  style={transformArr?.[idx]}
                 >
                   {[...numbers, ...numbers].map((number, subidx) => {
-                    return <span key={subidx}>{number}</span>
+                    return (
+                      <Text
+                        className={`${classPrefix}-number-text`}
+                        key={subidx}
+                      >
+                        {number}
+                      </Text>
+                    )
                   })}
-                </span>
+                </View>
               ) : (
-                <span className={`${classPrefix}-separator`}>{item}</span>
+                <View className={`${classPrefix}-separator`}>{item}</View>
               )}
-            </li>
+            </View>
           )
         })}
-      </ul>
+      </View>
     </View>
   )
 }

src/packages/animatingnumbers/countup.tsx

@@ -52,14 +52,14 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     return currNumber.split('')
   }
 
-  const numerArr = useMemo(getShowNumber, [value, length, thousands])
+  const numberArr = useMemo(getShowNumber, [value, length, thousands])
 
   const setNumberTransform = useCallback(() => {
     if (countupRef.current) {
       const numberItems = countupRef.current.querySelectorAll(
         '.nut-countup-number'
       )
-      const numberFilterArr: Array<string> = numerArr.filter(
+      const numberFilterArr: Array<string> = numberArr.filter(
         (item: string) => !Number.isNaN(Number(item))
       )
       Object.keys(numberItems).forEach((key) => {
@@ -73,10 +73,10 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
         }
       })
     }
-  }, [numerArr])
+  }, [numberArr])
 
   const numberEaseStyle: CSSProperties = {
-    transition: `transform ${duration}s ease-in-out`,
+    transitionDuration: `${duration}s`,
   }
 
   useEffect(() => {
@@ -86,12 +86,12 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     return () => {
       window.clearTimeout(timerRef.current)
     }
-  }, [numerArr, delay, setNumberTransform])
+  }, [numberArr, delay, setNumberTransform])
 
   return (
     <div className={`${classPrefix} ${className}`} ref={countupRef}>
       <ul className={`${classPrefix}-list`}>
-        {numerArr.map((item: string, idx: number) => {
+        {numberArr.map((item: string, idx: number) => {
           return (
             <li
               className={`${classPrefix}-listitem ${
@@ -107,7 +107,14 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
                   style={numberEaseStyle}
                 >
                   {[...numbers, ...numbers].map((number, subidx) => {
-                    return <span key={subidx}>{number}</span>
+                    return (
+                      <span
+                        className={`${classPrefix}-number-text`}
+                        key={subidx}
+                      >
+                        {number}
+                      </span>
+                    )
                   })}
                 </span>
               ) : (