Анимация ключевых слов

В прошлом году в Chromium браузерах появилась возможность создавать анимацию между значениями длины и специальными ключевыми словами (intrinsic sizing keywords). Значения длины — это px, rem, % и так далее. Ключевые слова — это auto, min-content, fit-content и другие. Они доступны в качестве значений некоторых свойств, например height.

Проблема в том, что браузеру нужно вычислить значение, соответствующее ключевому слову на основе контента. Поэтому не совсем понятно, как анимировать 0px в auto. А auto это сколько? Теперь есть механизм, который включает интерполяцию. Браузер будет вычислять необходимые промежуточные значения и делать переходы между ними.

Включается такое поведение свойством interpolate-size: allow-keywords. Его можно указать у конкретного элемента, где это нужно, или глобально для всей страницы, так как свойство наследуемое.

:root {
  /* Включение интерполяции для всей страницы */
  interpolate-size: allow-keywords;
}

.accordion {
  /* Или только для конкретного селектора */
  interpolate-size: allow-keywords;
}

Классический пример — аккордеон. Нужно, чтобы высота блока с произвольным контентом плавно изменялась от 0 до высоты контента и наоборот. Так как контент произвольный, высота заранее не известна и хотелось бы использовать ключевое слово auto или max-content. Раньше для этого использовался JS, теперь можно сделать на CSS.

.accordion__content {
  height: 0px;
  overflow: hidden;
  transition: height .5s;
  interpolate-size: allow-keywords;
}

.accordion__button[aria-expanded="true"] + .accordion__content {
  height: max-content;
  /* или auto вместо max-content */
}

Другой способ — использовать новую функцию calc-size(). Это как calc(), только умеет работать с ключевыми словами.

.accordion__content {
  height: 0px;
  overflow: hidden;
  transition: height .5s;
}

.accordion__button[aria-expanded="true"] + .accordion__content {
  height: calc-size(max-content, size);
  /* или auto вместо max-content */
}

Особенность calc-size() в том, что ко второму аргументу можно применять математические операции. Можно сделать так, чтобы аккордеон открылся на высоту контента и ещё дополнительные 20px:

.accordion__button[aria-expanded="true"] + .accordion__content {
  height: calc-size(max-content, size + 20px);
  /* или auto вместо max-content */
}

В статье на Chrome for Developers более подробно описано как это всё работает с примерами кода и видео (для браузеров, которые ещё это не поддерживают).

#css