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 #542

Merged
merged 3 commits into from Aug 4, 2021
Merged

fix: transition #542

merged 3 commits into from Aug 4, 2021

Conversation

temper357
Copy link
Contributor

@temper357 temper357 commented Jul 28, 2021

Close #513

修复 transition 相关 bug 导致 rax-slider 动画不工作且报错,总共包含三处 bug:

  1. Slider 动画失效。原因是 rax-slider 的动画实现是直接操作 dom 节点设置 style,然后进行 forceUpdate,由于给 dom 设置 style 已经会触发浏览器 layout,理论上 forceUpdate 是多余的(rax-slider 中这样做的原因是给 transform 设置 style text 中是用 rpx 做单位,rax 编译器并不会转换字符串中的单位,所以 rax-slider 给 dom 设置 style 是不会触发 layout,反而要依赖 forceUpdate 进行 layout。)而 kraken 原生支持 rpx 单位,在给 dom 设置 transform 也会进行 layout,forceUpdate 又进行了第二次 layout,而 forceUpdate 时会将 rax build 是会将 style 上的 rpx 转换成 vw 单位,这样会出现第一次 layout 时 style 为 transform: (-750rpx, 0, 0) ,第二次 layout 时 style 为 transform(-100vw, 0, 0),由于 setProperty 时只进行了字符串判断,kraken 认为第二次 style 与先前不一样,于是又触发了第二次动画,而这个动画的起点与终点是相同的,于是会发现动画是失效的。修复方法是在 setProperty 中提前将 transform 转换成 matrix4 的值进行判断,如果相等则直接返回。

  2. Slider 无限滚动时会报错。原因是 animation.dart 的 _getActiveAnimations 方法中的 forEach 中不需要触发 animation tick 否则在 tick 中会修改 forEach list 的长度导致 dart 报错。实际上在 animation tick 只需要在 _onTick 中做即可。

  3. Slider 无限滚动时从最后一帧切下一帧时出现空白帧。原因是 rax-slider 的无限滚动在最后一帧往下一帧切换时,会将 slider 的 transform 重置到第一帧的位置,此时需要临时 disable transition,使用的是将 transitionDuration 置为 0s 的方式,而 Kraken 在setProperty 的 shouldTransition 方法中未判断 transitionDuration 导致多执行了一次动画。

@temper357 temper357 changed the title [WIP] fix: transition fix: transition Jul 28, 2021
@temper357 temper357 requested review from yuanyan, andycall, wssgcg1213 and answershuto and removed request for andycall July 29, 2021 03:05
@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
@answershuto answershuto merged commit d8eb6f5 into main Aug 4, 2021
Browser Features automation moved this from In Progress to Done Aug 4, 2021
@answershuto answershuto deleted the fix/transition branch August 4, 2021 12:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

有可用的slider组件吗(rax-slider不好用)
3 participants