支持 transition-duration delay easing等动态设置 - #2457
Open
wenwenhua wants to merge 31 commits into
Open
Conversation
hiyuki
reviewed
Apr 22, 2026
| // 记录上次style map | ||
| // const lastStyleRef = useRef({} as {[propName: keyof ExtendedViewStyle]: number|string}) | ||
| // ** 从 style 中获取动画数据 | ||
| const transitionMap = useMemo(() => { |
Collaborator
There was a problem hiding this comment.
const transitionMapVersion = useMemo(()=>{
const changed = compare()
return changed ? newVersion : oldVersion
}, [originalStyle])
const transitionMap = useMemo(() => {...}, [transitionMapVersion])
hiyuki
reviewed
May 9, 2026
| const hasChanged = transitionKeys.some(key => prevStyle[key] !== originalStyle[key]) | ||
| if (hasChanged) { | ||
| transitionKeys.forEach(key => { lastTransitionStyleRef.current[key] = originalStyle[key] }) | ||
| transitionMapVersionRef.current++ |
Collaborator
There was a problem hiding this comment.
直接返回个new Symbol就行，不需要用这个ref自增
hiyuki
reviewed
May 9, 2026
| const prevStyle = lastTransitionStyleRef.current | ||
| const hasChanged = transitionKeys.some(key => prevStyle[key] !== originalStyle[key]) | ||
| if (hasChanged) { | ||
| transitionKeys.forEach(key => { lastTransitionStyleRef.current[key] = originalStyle[key] }) |
hiyuki
reviewed
May 9, 2026
| const transitionMap = useMemo(() => { | ||
| return parseTransitionStyle(originalStyle) | ||
| }, []) | ||
| const newTransitionMap = parseTransitionStyle(originalStyle) |
hiyuki
reviewed
May 9, 2026
| return newTransitionMap | ||
| } | ||
| // 检测 transitionProperty 是否变化 | ||
| if (newPropertyKeys !== initialPropertyKeysRef.current) { |
Collaborator
There was a problem hiding this comment.
这个检测不能再上面做么，你上面本来也在遍历比较属性
hiyuki
requested changes
Jul 21, 2026
hiyuki
left a comment
hiyuki
left a comment
Collaborator
There was a problem hiding this comment.
有两项问题需要在合入前处理：
-
[P1] 同步更新 Mpx2RN Skill
该 PR 改变了 RN 对动态
transition-duration、transition-delay、transition-timing-function以及enable-animation枚举值的对外支持方式，但目前只更新了 VitePress 文档。根据仓库“文档与 Skill 同步约束”，请同步更新：.agents/skills/mpx2rn/references/rn-style-reference.md.agents/skills/mpx2rn/references/rn-template-reference.md
其中
rn-template-reference.md当前仍将enable-animation声明为boolean。 -
[P2] 修正文档示例中的无效属性
docs-vitepress/guide/rn/style.md新增的 Good 示例使用了transform-duration：transition-property:transform; transform-duration: 0;
CSS 及运行时识别的属性应为
transition-duration，当前示例无法实现动态控制过渡时长。
另外建议为动态 transition 配置补充核心单测，至少覆盖 duration 从正数切换为 0、delay/easing 更新，以及 property 变化被拒绝。当前 unit CI 的失败原因是缺少 @unocss/core，与本 PR 改动无直接关系。
hiyuki
reviewed
Jul 31, 2026
| | animation | object | | 传递动画的实例， 可配合 mpx.createAnimation 方法一起使用 | | ||
| | enable-background | boolean | `false ` | RN 环境特有属性，是否要开启 background-image、background-size 和 background-position 的相关计算或渲染，请根据实际情况开启 | | ||
| | enable-animation | boolean | `false` | RN 环境特有属性，开启要开启动画渲染，请根据实际情况开启 | | ||
| | enable-animation | boolean \| `api` \| `transition` | 根据首次渲染的 `animation` 属性或 transition 样式自动检测 | RN 环境特有属性，显式指定 Animation API 或 CSS Transition 动画类型；`true` 等价于 `api` | |
hiyuki
reviewed
Jul 31, 2026
| ```js | ||
| this.dynamicStyle = { | ||
| transition: this.enableTransition ? 'transform 0.5s ease-out 0.1s' : 'transform 0s linear 0s', | ||
| transform: this.enableTransition ? 'translateX(100px)' : 'translateX(0)' |
Collaborator
There was a problem hiding this comment.
这个transform和开关transition没有关系啊
hiyuki
reviewed
Jul 31, 2026
| - 仅 `view` 组件支持动画相关属性。 | ||
|
|
||
| **自动检测与 enable-animation：** 框架会自动检测样式和属性中的动画定义来确定动画类型（如检测到 `transition` 样式或 `animation` 属性）。如果样式中一开始不存在动画定义，但后续需要动态添加（如通过 `wx:style` 动态添加 `transition`），建议使用 `enable-animation` 属性预先声明动画类型。 | ||
| **自动检测与 enable-animation：** 框架会在首次渲染时根据样式和属性中的动画定义确定动画类型（如检测到 `transition` 样式或 `animation` 属性），动画类型在组件生命周期内必须保持稳定。也可通过 `enable-animation="api"` / `enable-animation="transition"` 显式指定使用 Animation API / CSS Transition；布尔值 `true` 等价于 `api`，不能用于预声明 CSS Transition。如果首次渲染时只有 `transition-property`，时长等参数后续才通过 `wx:style` 动态设置，需使用 `enable-animation="transition"` 预先声明动画类型，同时保证 `transition-property` 从首次渲染起保持稳定。 |
Collaborator
There was a problem hiding this comment.
有transition-property了为啥还需要设置enable-animation啊？
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.