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属性不适用于拖拽这类需要实时、高频更新的场景。
如何测试