interpolate-size

Ограниченная доступность

Эта функция не является Baseline, так как она не работает во всех широко используемых браузерах.

Экспериментальная: Это экспериментальная технология
Перед использованием в продуктовой среде внимательно изучите таблицу совместимости браузеров таблицу совместимости браузеров.

Свойство interpolate-size CSS позволяет вам включить анимации и переходы между значением <length-percentage> и значением внутренней размерности, таким как auto, fit-content или max-content.

Это свойство обычно используется для анимирования width и/или height контейнера между значением <length-percentage> и полным размером содержимого (например, между состояниями "закрыто" и "открыто" или "скрыто" и "отображено"), когда анимация свойства CSS, не относящегося к модели бокса, например, transform, не является жизнеспособным решением.

Примечание: Поведение, включенное interpolate-size, по умолчанию не может быть включено в веб-среде, так как многие сайты используют таблицы стилей, предполагающие, что значения внутренней размерности не могут анимироваться. Включение по умолчанию приведет к проблемам обратной совместимости (см. соответствующую дискуссию CSS WG).

Синтаксис

/* Keyword values */
interpolate-size: allow-keywords;
interpolate-size: numeric-only;

/* Global values */
interpolate-size: inherit;
interpolate-size: initial;
interpolate-size: revert;
interpolate-size: revert-layer;
interpolate-size: unset;

Значения

allow-keywords: Включает интерполяцию между значением <length-percentage> и значением внутренней размерности, чтобы разрешить анимацию между ними.
numeric-only: Поведение по умолчанию — значения внутренней размерности не могут быть интерполированы.

Описание

Установка interpolate-size: allow-keywords включает интерполяцию между значением <length-percentage> и значением внутренней размерности. Обратите внимание, что это не включает анимацию между двумя значениями внутренней размерности. Один конец анимации должен быть <length-percentage>.

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

:root {
  interpolate-size: allow-keywords;
}

Если вы хотите ограничить область действия, вы можете установить его на соответствующий элемент контейнера. Следующее включит интерполяцию внутренних размеров только для <main> и его потомков:

main {
  interpolate-size: allow-keywords;
}

Примечание: Значения, возвращаемые функцией calc-size(), также могут быть интерполированы. Фактически, включение calc-size() в значение свойства автоматически применяет interpolate-size: allow-keywords к выбору. Однако, поскольку interpolate-size наследуется, как указано выше, это предпочтительное решение для включения анимации внутренней размерности в большинстве случаев. Вы должны использовать calc-size() только для включения анимации внутренней размерности, если они также требуют вычислений.

Значения, которые могут быть интерполированы

Следующие значения внутренней размерности в настоящее время могут быть включены в анимации:

auto
min-content
max-content
fit-content
content (для контейнеров, размер которых задается с помощью flex-basis).

Формальное определение

Начальное значение	`numeric-only`
Применимо к	всем элементам
Наследуется	да
Вычисленное значение	как указано
Тип анимации	Не анимируемо

Формальный синтаксис

interpolate-size = 
  numeric-only    |
  allow-keywords

Примеры

Базовое использование `interpolate-size`

Этот пример демонстрирует, как установить interpolate-size: allow-keywords в документе, чтобы включить анимации, использующие внутреннюю размерность. Демонстрация содержит значок персонажа/«бейджик имени», который можно навести курсором или выбрать, чтобы показать информацию о персонаже. Открытие обрабатывается переходом height между установленной длиной и max-content.

HTML

HTML содержит один элемент <section> с установленным tabindex="0", чтобы он мог получать фокус клавиатуры. Элемент <section> содержит элементы <header> и <main>, каждый со своим содержимым.

<section tabindex="0">
  <header>
    <h2>Tanuki</h2>
  </header>
  <main>
    <p>Tanuki is the silent phantom of MDN.</p>
    <ul>
      <li><strong>Height</strong>: 3.03m</li>
      <li><strong>Weight</strong>: 160kg</li>
      <li><strong>Tech Fu</strong>: 7</li>
      <li><strong>Bad Jokes</strong>: 9</li>
    </ul>
  </main>
</section>

CSS

В CSS мы сначала устанавливаем interpolate-size: allow-keywords в :root, чтобы включить его для всего документа.

:root {
  interpolate-size: allow-keywords;
}

Затем мы устанавливаем height элемента <section> в значение 2.5rem и overflow в значение hidden, чтобы отображалась только <header> по умолчанию, затем указываем анимацию, которая анимирует <section> height за 1 секунду во время изменения состояния. Наконец, мы устанавливаем <section> height при наведении курсора :hover и при получении фокуса :focus на значение max-content.

section {
  height: 2.5rem;
  overflow: hidden;
  transition: height ease 1s;
}

section:hover,
section:focus {
  height: max-content;
}

Остальная часть CSS скрыта для краткости.

Результат

Попробуйте навести курсор на <section> или получить фокус с помощью клавиатуры — он анимируется до полной высоты, показывая все содержимое.

Спецификации

Спецификация
CSS Values and Units Module Level 5 # interpolate-size

Совместимость браузеров

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`interpolate-size`	129	Нет	Нет	115	Нет	129	Нет	Нет	Нет	Нет	129
`allow-keywords`	129	Нет	Нет	115	Нет	129	Нет	Нет	Нет	Нет	129
`numeric-only`	129	Нет	Нет	115	Нет	129	Нет	Нет	Нет	Нет	129

См. также

calc-size()
Анимирование до height: auto; (и других ключевых слов внутренней размерности) в CSS на developer.chrome.com (2024)

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size