Сид Штумпель на демках показывает, как View Transition API помогает делать красивые преобразования списков минимумом кода.
Представьте, что у вас есть список карточек. И вы хотите, чтобы:
- когда добавляется новая карточка, остальные красиво двигаются на новое место, а новая карточка появляется в освободившемся пространстве;
- когда карточка удаляется, остальные красиво переезжают на новые места.
Что по дефолту делает View Transition API с элементами, на которые он завязан:
- Считает координаты и размеры элемента до перехода.
- Считает координаты и размеры элемента после перехода.
- Делает плавную анимацию изменения размеров и координат через прозрачность и режимы смешивания во время перехода.
Получается, для красивых анимаций внутри списков вам всего лишь нужно разметить при помощи CSS элементы этого списка как анимируемые (через
view-transition-name и подобные свойства). Profit!https://cydstumpel.nl/being-lazy-with-view-transition-old-and-new/
