Переходы 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
Сайт calc-size()-функция пока доступна не во всех браузерах. Обратный вариант может быть достигнут путем сохранения оригинального height: auto-декларация.
Решение с interpolate-size
Сайт 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 Эти правила позволяют выполнять переходы даже при первоначальном обновлении стиля. @starting-style-правило обеспечивает корректное выполнение анимации при первом обновлении стиля.
Поддержка браузеров
В настоящее время новые объекты находятся в стадии calc-size() а также interpolate-size пока поддерживаются не всеми браузерами. В Chrome они доступны под флагом эксперимента, а в Safari и Firefox пока нет. Поддержка transition-behavior в Chrome и Edge, но не в Safari и Firefox, что, надеюсь, изменится в будущем.