CSS view-transition-name — плавні переходи між станами сторінки

CSS властивість view-transition-name дає елементу унікальне ім'я для View Transitions — і тоді він анімується між станами сторінки самостійно.

правити

Загальний опис

View Transitions роблять те, за що раніше платили складними бібліотеками: елемент, який є і до, і після зміни, плавно перелітає зі старої позиції в нову.

Браузер бере знімок до й після, знаходить елементи з однаковим view-transition-name і сам анімує різницю. Твоє завдання — лише дати їм ім'я й обгорнути зміну в document.startViewTransition().

правити

Нотатка

Ім'я має бути унікальним на сторінці в кожен момент. Два видимі елементи з однаковим іменем зламають перехід.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

view-transition-name: none | <custom-ident>;

Властивість view-transition-name може отримувати 2 значень:

none

Елемент не бере участі в переході окремо.

автор: NagarD

правити

custom-ident

Унікальне ім'я — елемент анімується між станами самостійно.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
view-transition-name	111+	-	18+	97+	111+	-

Підтримка: мобільні переглядачі

Переглядач
view-transition-name	111+	yes	-	18+

Приклади

+ запропонувати свій приклад у пісочниці

<img id="hero" src="/img/logo.svg" alt="" style="width:100px">
<button id="grow">Збільшити</button>

#hero {
    view-transition-name: hero-image;
}

document.getElementById('grow').addEventListener('click', () => {
    // браузер сам анімує зміну розміру
    document.startViewTransition(() => {
        document.getElementById('hero').style.width = '300px';
    });
});