правка анимации

2026-08-18 13:05:06 +05:00
parent 5ad90bb7cb
commit e52af6d3c8
2 changed files with 16 additions and 2 deletions
@@ -95,6 +95,19 @@
 // сплющивания колонок. На телефоне таблица становится карточками (медиазапрос ниже).
 .matrixScroll {
  overflow-x: auto;
+  // overflow-y ОБЯЗАН быть задан явно. По спецификации, если одна ось получает
+  // прокрутку, вторая с `visible` вычисляется в `auto` — то есть один
+  // overflow-x: auto включал прокрутку и по вертикали тоже. А анимация
+  // перестановки (см. ui/useFlipRows) стартует с translateY на высоту строки:
+  // при удалении строки нижние сначала отрисованы СМЕЩЁННЫМИ ВНИЗ, вылезают за
+  // нижнюю границу контейнера — на кадр появляется вертикальная полоса
+  // прокрутки, из-за неё контейнер сужается, текст в колонках перевёрстывается,
+  // строки съезжают, а через 380 мс всё это откатывается назад. Отсюда и
+  // дрожание интерфейса на каждое удаление позиции.
+  //
+  // hidden, а не clip: `clip` не создаёт scroll container, и тогда вертикальный
+  // вылет анимации утёк бы наружу, прокручивая уже саму страницу.
+  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
 }

@@ -22,8 +22,9 @@ import * as React from 'react';
 //     центра разрывало блок визуально. Плюс строка становилась шире контейнера
 //     и .matrixScroll (overflow-x: auto) на время анимации показывал полосу
 //     горизонтальной прокрутки.
-//   • пружинистый перелёт (cubic-bezier с >1): при overflow-x: auto вторая ось
-//     тоже становится auto, и вылет за край таблицы строку бы обрезало.
+//   • пружинистый перелёт (cubic-bezier с >1): вылет за край .matrixScroll
+//     обрезается (там overflow-y: hidden — см. approval.module.scss), так что
+//     перелёт был бы виден только как срезанная строка.
 //   • подсветка ВСЕХ переехавших строк: при обмене двух шагов двигаются оба, и
 //     жёлтым заливало пол-таблицы. Подсвечиваем только тот блок, который двигал
 //     пользователь (activeKeys).