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