правка анимации
This commit is contained in:
@@ -95,6 +95,19 @@
|
|||||||
// сплющивания колонок. На телефоне таблица становится карточками (медиазапрос ниже).
|
// сплющивания колонок. На телефоне таблица становится карточками (медиазапрос ниже).
|
||||||
.matrixScroll {
|
.matrixScroll {
|
||||||
overflow-x: auto;
|
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;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -22,8 +22,9 @@ import * as React from 'react';
|
|||||||
// центра разрывало блок визуально. Плюс строка становилась шире контейнера
|
// центра разрывало блок визуально. Плюс строка становилась шире контейнера
|
||||||
// и .matrixScroll (overflow-x: auto) на время анимации показывал полосу
|
// и .matrixScroll (overflow-x: auto) на время анимации показывал полосу
|
||||||
// горизонтальной прокрутки.
|
// горизонтальной прокрутки.
|
||||||
// • пружинистый перелёт (cubic-bezier с >1): при overflow-x: auto вторая ось
|
// • пружинистый перелёт (cubic-bezier с >1): вылет за край .matrixScroll
|
||||||
// тоже становится auto, и вылет за край таблицы строку бы обрезало.
|
// обрезается (там overflow-y: hidden — см. approval.module.scss), так что
|
||||||
|
// перелёт был бы виден только как срезанная строка.
|
||||||
// • подсветка ВСЕХ переехавших строк: при обмене двух шагов двигаются оба, и
|
// • подсветка ВСЕХ переехавших строк: при обмене двух шагов двигаются оба, и
|
||||||
// жёлтым заливало пол-таблицы. Подсвечиваем только тот блок, который двигал
|
// жёлтым заливало пол-таблицы. Подсвечиваем только тот блок, который двигал
|
||||||
// пользователь (activeKeys).
|
// пользователь (activeKeys).
|
||||||
|
|||||||
Reference in New Issue
Block a user