From cc015463f3b37d92eb0687ca3e20b843e3488e82 Mon Sep 17 00:00:00 2001 From: ajnart Date: Wed, 9 Sep 2026 14:37:33 +0200 Subject: [PATCH] fix(board): disable displaced item movement animations --- apps/docs/docs/management/boards/index.mdx | 4 ++-- .../components/board/sections/grid/grid-editor.css | 13 +++---------- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx index 80a2f89b3..9c1f75a03 100644 --- a/apps/docs/docs/management/boards/index.mdx +++ b/apps/docs/docs/management/boards/index.mdx @@ -38,8 +38,8 @@ border color, and CSS classes. Items can occupy the outermost rows and columns of a Container. The drop preview shows the position where the item will remain when released. -Dragging an item onto another item of the same size swaps their positions; the displaced item stays at its previewed -position when you release the pointer. +Dragging an item onto another item of the same size swaps their positions. Displaced items snap directly to their +previewed positions without a movement animation and stay there when you release the pointer. A **rail** reserves one to three columns at the left or right of a non-Mobile layout. Rails stay fixed while the page scrolls and store their contents separately for each layout. diff --git a/apps/nextjs/src/components/board/sections/grid/grid-editor.css b/apps/nextjs/src/components/board/sections/grid/grid-editor.css index fc71774f7..a50350c4c 100644 --- a/apps/nextjs/src/components/board/sections/grid/grid-editor.css +++ b/apps/nextjs/src/components/board/sections/grid/grid-editor.css @@ -22,14 +22,7 @@ width: var(--board-grid-preview-width) !important; height: var(--board-grid-preview-height) !important; translate: var(--board-grid-preview-x) var(--board-grid-preview-y); - will-change: translate; -} - -.board-grid-entry[data-grid-preview="true"]:not([data-dnd-active="true"]) { - transition: - translate 100ms ease, - width 100ms ease, - height 100ms ease; + transition: none; } .board-grid-entry[data-dnd-active="true"], @@ -111,8 +104,8 @@ zoom: var(--board-grid-overlay-content-zoom, 1); } -body[data-board-grid-interacting] .board-grid-entry[data-dnd-active="true"], -body[data-board-grid-interacting] .board-grid-entry[data-dnd-drag-source="true"], +/* Displaced entries must snap with the preview too; animating their offsets can trail a new swap target. */ +body[data-board-grid-interacting] .board-grid-entry, body[data-board-grid-interacting] .board-grid-placeholder { transition: none; }