mefody.dev

Ленимся с view-transition-old и view-transition-new

Сид Штумпель на демках показывает, как View Transition API помогает делать красивые преобразования списков минимумом кода.

Представьте, что у вас есть список карточек. И вы хотите, чтобы:
- когда добавляется новая карточка, остальные красиво двигаются на новое место, а новая карточка появляется в освободившемся пространстве;
- когда карточка удаляется, остальные красиво переезжают на новые места.

Что по дефолту делает View Transition API с элементами, на которые он завязан:
- Считает координаты и размеры элемента до перехода.
- Считает координаты и размеры элемента после перехода.
- Делает плавную анимацию изменения размеров и координат через прозрачность и режимы смешивания во время перехода.

Получается, для красивых анимаций внутри списков вам всего лишь нужно разметить при помощи CSS элементы этого списка как анимируемые (через view-transition-name и подобные свойства). Profit!

https://cydstumpel.nl/being-lazy-with-view-transition-old-and-new/

Portfolio Cyd Stumpel

Being lazy with view-transition-old and -new | Blog Cyd Stumpel

One of the most important lessons you can learn as a developer is that being lazy is often a good thing. Students sometimes laugh sheepishly at me when I tell them that, but especially if it leads to writing less (or less complicated) code, being lazy is…

🔥38❤4❤‍🔥3👍1🥴1

www.tgoop.com/mefody_dev/379

4.28K viewsJul 17 at 10:56

Ленимся с view-transition-old и view-transition-new

Сид Штумпель на демках показывает, как View Transition API помогает делать красивые преобразования списков минимумом кода.

Представьте, что у вас есть список карточек. И вы хотите, чтобы:
- когда добавляется новая карточка, остальные красиво двигаются на новое место, а новая карточка появляется в освободившемся пространстве;
- когда карточка удаляется, остальные красиво переезжают на новые места.

Что по дефолту делает View Transition API с элементами, на которые он завязан:
- Считает координаты и размеры элемента до перехода.
- Считает координаты и размеры элемента после перехода.
- Делает плавную анимацию изменения размеров и координат через прозрачность и режимы смешивания во время перехода.

Получается, для красивых анимаций внутри списков вам всего лишь нужно разметить при помощи CSS элементы этого списка как анимируемые (через view-transition-name и подобные свойства). Profit!

https://cydstumpel.nl/being-lazy-with-view-transition-old-and-new/

BY mefody.dev