fix: 移除画布的 CSS transition 属性以解决拖拽卡顿问题 #173
Open
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.
概述
本 PR 修复了一个严重的性能问题,该问题导致在拖拽 simple 流程设计器画布时,出现异常的卡顿和“不跟手”现象。其根本原因是作用于主画布元素的 CSS
transition
属性与拖拽操作中高频的
transform
更新产生了冲突。问题分析
.simple-process-model
元素上存在一条transition: transform 0.3s ...
样式规则。mousemove
事件,并以极高的频率(每秒数十次)更新transform
属性来移动画布。transition
规则拦截了每一次本应瞬时完成的更新,并试图将其转换为一个耗时 0.3 秒的平滑动画。解决方案
解决方案是,从
.simple-process-model
的 CSS 规则中移除transition
属性。这可以确保拖拽事件产生的
transform
更新能够被立即应用,使拖拽交互变得平滑、响应迅速且性能良好,符合用户的操作直觉。transition
属性不适用于拖拽这类需要实时、高频更新的场景。
如何测试