Задоволення від роботи з UI-анімаціями за допомогою API переходів спільних елементів (Частина 2)

У першій частині цієї статті ми розглянули API переходів спільних елементів (SET API) та те, як ми можемо використовувати його для легкого створення складних переходів для різних елементів UI, які зазвичай вимагають великої кількості коду JavaScript або бібліотеки анімації.

🚀 Але що з гладкими та приємними анімаціями переходів між окремими сторінками? Це, мабуть, одна з найчастіше запитуваних функцій за останні кілька років, тому що навіть з усіма фреймворками, такими як React та Svelte, та бібліотеками анімації, такими як GSAP та Framer Motion, переходи між сторінками все ще дійсно важко зробити.

💡 У цій статті ми покажемо переходи між сторінками, які часто зустрічаються в Single Page Applications, та поговоримо про майбутнє API переходів спільних елементів для переходів між документами (Multi Page Application). Я також продемонструю деякі чудові приклади реалізації React, Astro та Svelte від спільноти розробників.

• 📌 API переходів спільних елементів дозволяє браузеру виконувати багато тяжкої роботи, що стосується анімацій, дозволяючи нам створювати складні анімації UI більш структурованим способом.
• 📌 Головна частина API - це функція JavaScript, яка робить знімки стану UI до та після оновлення DOM і застосовує анімацію перехресного затемнення:
• 📌 Далі ми хочемо сказати SET API, щоб він звертав увагу на певні елементи UI на сторінці та стежив за їх положенням та розмірами. Саме тут вступає в дію мітка CSS page-transition-tag.