支持 transition-duration delay easing等动态设置

docs-vitepress/guide/rn/component.md

@@ -47,16 +47,16 @@
 视图容器。
 属性
 
-| 属性名                   | 类型     | 默认值         | 说明                                                       |
-| ----------------------- | ------- | ------------- | ---------------------------------------------------------- |
-| hover-class	             | string  |         | 指定按下去的样式类。 |
-| hover-start-time   | number  |     `50`    | 按住后多久出现点击态，单位毫秒|
-| hover-stay-time	  | number  |     `400`    | 手指松开后点击态保留时间，单位毫秒	 |
-| animation | object  |   | 传递动画的实例， 可配合mpx.createAnimation方法一起使用|
-| enable-background		  | boolean  |     `false `   |  RN环境特有属性，是否要开启background-image、background-size和background-position的相关计算或渲染，请根据实际情况开启 |
-| enable-animation | boolean  | `false`  | RN环境特有属性，开启要开启动画渲染，请根据实际情况开启 |
-| enable-fast-image | boolean  | `false`  | RN环境特有属性，开启后将使用 react-native-fast-image 进行图片渲染，请根据实际情况开启 |
-| is-simple | -  | -  | RN环境特有标记，设置后将使用简单版本的 view 组件渲染，该组件不包含 css var、calc、ref 等拓展功能，但性能更优，请根据实际情况设置 |
+| 属性名                   | 类型      | 默认值                                 | 说明                                                                                                                                            |
+| ----------------------- |---------|-------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|
+| hover-class	             | string  |                                     | 指定按下去的样式类。                                                                                                                                    |
+| hover-start-time   | number  | `50`                                | 按住后多久出现点击态，单位毫秒                                                                                                                               |
+| hover-stay-time	  | number  | `400`                               | 手指松开后点击态保留时间，单位毫秒	                                                                                                                            |
+| animation | object  |                                     | 传递动画的实例， 可配合mpx.createAnimation方法一起使用                                                                                                         |
+| enable-background		  | boolean | `false `                            | RN环境特有属性，是否要开启background-image、background-size和background-position的相关计算或渲染，请根据实际情况开启                                                          |
+| enable-animation | boolean\|enum(`api`/`transition`)  | 默认会根据 css 中的动画属性设置 enable-animation | 设置 api/transition 可指定使用 createAnimation API/transition 的动画形式，enable-animation 设置 true 默认为 createAnimation API 形式，需要注意的是指定动画类型后，对应的动画参数也需要匹配设置 |
+| enable-fast-image | boolean | `false`                             | RN环境特有属性，开启后将使用 react-native-fast-image 进行图片渲染，请根据实际情况开启                                                                                      |
+| is-simple | -       | -                                   | RN环境特有标记，设置后将使用简单版本的 view 组件渲染，该组件不包含 css var、calc、ref 等拓展功能，但性能更优，请根据实际情况设置                                                                  |
 
 事件
 

packages/webpack-plugin/lib/runtime/components/react/animationHooks/useTransitionHooks.ts

@@ -144,7 +144,7 @@ function parseTransitionStyle (originalStyle: ExtendedViewStyle) {
   const transitionMap = transitionData.reduce((acc, cur) => {
     // hasOwn(transitionSupportedProperty, dash2hump(val)) || val === Transform
     const { property = '', duration = 0, delay = 0, easing = Easing.inOut(Easing.ease) } = cur
-    if ((hasOwn(transitionSupportedProperty, dash2hump(property)) || property === 'transform') && duration > 0) {
+    if ((hasOwn(transitionSupportedProperty, dash2hump(property)) || property === 'transform') && duration >= 0) {
       acc[property] = {
         duration,
         delay,
@@ -157,17 +157,51 @@ function parseTransitionStyle (originalStyle: ExtendedViewStyle) {
   return transitionMap
 }
 
+const transitionKeys = ['transition', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay', 'transitionProperty'] as const
+
+function getTransitionPropertyKeys (map: TransitionMap): string {
+  return Object.keys(map).sort().join(',')
+}
+
 export default function useTransitionHooks<T, P> (props: AnimationHooksPropsType) {
   // console.log(`useTransitionHooks, props=`, props)
   const { style: originalStyle = {}, transitionend } = props
   // style变更标识(首次render不执行)，初始值为0，首次渲染后为1
   const animationDeps = useRef(0)
-  // 记录上次style map
-  // const lastStyleRef = useRef({} as {[propName: keyof ExtendedViewStyle]: number|string})
-  // ** 从 style 中获取动画数据
+  // transition 时序属性动态更新追踪
+  const lastTransitionStyleRef = useRef<Record<string, any>>(
+    transitionKeys.reduce((acc, key) => { acc[key] = originalStyle[key]; return acc }, {} as Record<string, any>)
+  )
+  const prevTransitionMapRef = useRef<TransitionMap | null>(null)
+  // ** 从 style 中获取动画数据(支持动态更新 transitionDuration/transitionDelay/transitionTimingFunction)
   const transitionMap = useMemo(() => {
-    return parseTransitionStyle(originalStyle)
-  }, [])
+    const prevStyle = lastTransitionStyleRef.current
+    // 检测 transition 时序属性是否变化并更新
+    let hasChanged = false
+    transitionKeys.forEach(key => {
+      if (prevStyle[key] !== originalStyle[key]) {
+        hasChanged = true
+        prevStyle[key] = originalStyle[key]
+      }
+    })
+    // 时序属性未变化且非首次计算，跳过重新解析
+    if (!hasChanged && prevTransitionMapRef.current) {
+      return prevTransitionMapRef.current
+    }
+    const newTransitionMap = parseTransitionStyle(originalStyle)
+    if (!prevTransitionMapRef.current) {
+      // 首次计算
+      prevTransitionMapRef.current = newTransitionMap
+      return newTransitionMap
+    }
+    // 检测 transitionProperty 是否变化，变化时直接返回上一次的 transitionMap
+    if (getTransitionPropertyKeys(newTransitionMap) !== getTransitionPropertyKeys(prevTransitionMapRef.current)) {
+      error('[Mpx runtime error]: dynamic setting transitionProperty is not supported')
+      return prevTransitionMapRef.current
+    }
+    prevTransitionMapRef.current = newTransitionMap
+    return newTransitionMap
+  }, [originalStyle])
   // ** style prop sharedValue  interpolateOutput: SharedValue<InterpolateOutput>
   const { shareValMap, animatedKeys, animatedStyleKeys } = useMemo(() => {
     // 记录需要执行动画的 propName