Skip to content

fix: 移除画布的 CSS transition 属性以解决拖拽卡顿问题 #173

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

leechaojie
Copy link

@leechaojie leechaojie commented Aug 21, 2025

概述

本 PR 修复了一个严重的性能问题,该问题导致在拖拽 simple 流程设计器画布时,出现异常的卡顿和“不跟手”现象。其根本原因是作用于主画布元素的 CSS transition
属性与拖拽操作中高频的 transform 更新产生了冲突。

问题分析

  • .simple-process-model 元素上存在一条 transition: transform 0.3s ... 样式规则。
  • 在拖拽过程中,JavaScript 会监听 mousemove 事件,并以极高的频率(每秒数十次)更新 transform 属性来移动画布。
  • CSS 的 transition 规则拦截了每一次本应瞬时完成的更新,并试图将其转换为一个耗时 0.3 秒的平滑动画。
  • 这导致了画布的实际位置永远滞后于鼠标光标,产生了“拖拽很迟钝”的感觉。同时,浏览器也被迫不断地创建和销毁大量无法完成的动画,造成了不必要的性能开销。

解决方案

解决方案是,从 .simple-process-model 的 CSS 规则中移除 transition 属性。

这可以确保拖拽事件产生的 transform 更新能够被立即应用,使拖拽交互变得平滑、响应迅速且性能良好,符合用户的操作直觉。transition
属性不适用于拖拽这类需要实时、高频更新的场景。

如何测试

  1. 切换到本分支。
  2. 打开 simple 流程设计器组件。
  3. 点击并拖拽画布背景。
  4. 观察到画布现在可以平滑、无延迟地跟随鼠标光标移动。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant