Переходи CSS — чудовий спосіб створити інтерактивність. Досить, transition до початкового стану елемента, а браузер анімує перехід між двома станами. Переходи для внутрішніх розмірів елементів, наприклад auto Однак це була проблема для веб-розробників протягом десятиліть, і єдиним варіантом було динамічне обчислення висоти за допомогою JavaScript.
Інша проблема полягає в тому, щоб починати переходи, коли елемент отримує свій перший стиль, наприклад, коли додається до DOM або коли display- значення none зміни. У цій статті пояснюється, як вирішити цю проблему за допомогою нових функцій CSS, таких як calc-size(), interpolate-size, @starting-style і transition-behavior можна керувати.
Розчин с calc-size()
Якщо у вас є елемент DOM із закритого стану (height: 0) у відкритий стан (height: auto) переходить, анімація зазвичай не виконується, навіть якщо transitionВстановлено властивість. Це тому, що браузери не підтримують переходи до внутрішніх розмірів, як auto підтримка. Новий calc-size()Однак функція дає змогу виконувати обчислення цих внутрішніх величин і, отже, також переходи:
f95f6dcb193aa903adc84ce47bc4a296
The calc-size()- Функція ще не доступна у всіх браузерах. Запасний варіант можна досягти, зберігши оригінал height: auto- Декларація може бути досягнута.
Розчин с interpolate-size
The interpolate-sizeВластивість дозволяє вам налаштувати поведінку інтерполяції браузерів і вирішити, чи розрізняти такі ключові слова, як auto слід інтерполювати. За замовчуванням інтерполяція відбувається лише між числовими значеннями. с allow-keywords Однак ви можете ввімкнути переходи між ключовими словами:
f95f6dcb193aa903adc84ce47bc4a296
Вами interpolate-size: allow-keywords на :rootВи активуєте нову поведінку для всієї сторінки.
Перехід від display:none
Інша проблема виникає, коли елемент о display:none переходить у видимий стан. Там display не є анімаційною властивістю, анімація не відбувається. Тут допомагають нові функції CSS @starting-style і transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
З transition-behavior: allow-discrete гарантує, що анімація виконується перед display- значення block на none перемикається. Ці правила дозволяють виконувати переходи навіть під час початкового оновлення стилю. The @starting-styleГарантує правильний запуск анімації під час початкового оновлення стилю.
Підтримка браузера
Наразі нові властивості calc-size() і interpolate-size ще не підтримується всіма браузерами. У Chrome вони доступні під прапором експерименту, але ще не доступні в Safari та Firefox. Так само підтримка для transition-behavior Присутній у Chrome і Edge, але не в Safari та Firefox. Сподіваюся, це зміниться в майбутньому.