Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: transition execution timing #559

Merged
merged 14 commits into from Aug 10, 2021
Merged

fix: transition execution timing #559

merged 14 commits into from Aug 10, 2021

Conversation

temper357
Copy link
Contributor

@temper357 temper357 commented Aug 3, 2021

Closes #523
Closes #515

修复 transition 动画的执行时机不对。

问题:
当前 Kraken 动画是在 style 设置过程中通过设置延时将 transition 延迟到下一帧执行,这带来几个问题:

  1. transition 的执行强依赖 style 的顺序,当 transition 指定的 property 在 transition 之前定义时将不生效,如 transform: tranlate(100px, 0); transition: all 1s ease; 动画将不生效,因为 transform setStyle 时在 style 中找不到 transition。
  2. transition 的执行时机不对,transition 必须要 node layout 完成后的下一帧才生效,因此必须在 requestFrameAnimation 或者 setTimeout 后才会生效,目前 Kraken 只判断了初始值是否为 null 或者 length 是否为 auto 是不够的。

fix:

  1. 在 flushUICommand 中将 setStyle 拆成两部分执行,先执行完这一帧当中所有的的 CSSStyleDeclaration 的设置逻辑,等 style 设置完成后再执行 setRenderStyle 逻辑,这样能保证 transition 对应的 property 设置时能取到 transition 的配置。
  2. 为了保证 transition 在 layout 完生效,在 shouldTransition 中判断当前 renderBoxModel 是否已经 layout 过,如果还未 layout 则不执行动画。

@temper357 temper357 requested review from andycall, yuanyan, wssgcg1213 and answershuto and removed request for andycall and yuanyan August 4, 2021 04:10
@temper357 temper357 changed the title [WIP] fix: transition execution timing fix: transition execution timing Aug 4, 2021
@temper357 temper357 added this to In Progress in Browser Features via automation Aug 4, 2021
@temper357 temper357 added this to the 0.9 milestone Aug 4, 2021
kraken/lib/src/bridge/to_native.dart Outdated Show resolved Hide resolved
@answershuto answershuto merged commit 8dad11a into main Aug 10, 2021
Browser Features automation moved this from In Progress to Done Aug 10, 2021
@answershuto answershuto deleted the fix/animation-timing branch August 10, 2021 07:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
3 participants