interpolate-size

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Die interpolate-size CSS Eigenschaft ermöglicht Animationen und Übergänge zwischen einem <length-percentage> Wert und einem intrinsischen Größenwert wie auto, fit-content oder max-content.

Diese Eigenschaft wird typischerweise verwendet, um die width und/oder height eines Containers zwischen einem <length-percentage> und der vollständigen Größe seines Inhalts zu animieren (d.h. zwischen den Zuständen "geschlossen" und "offen" oder "verbergen" und "anzeigen"), wenn die Animation einer nicht Box-Modell CSS-Eigenschaft, wie transform, keine praktikable Lösung darstellt.

Hinweis: Das Verhalten, das durch interpolate-size aktiviert wird, kann nicht standardmäßig im gesamten Web aktiviert werden, da viele Websites existieren, die Stylesheets verwenden, die davon ausgehen, dass intrinsische Größenwerte nicht animiert werden können. Die standardmäßige Aktivierung würde mehrere Rückwärtskompatibilitätsprobleme verursachen (siehe relevante CSS WG Diskussion).

Syntax

css
/* 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;

Werte

allow-keywords

Ermöglicht die Interpolation zwischen einem <length-percentage> Wert und einem intrinsischen Größenwert, um die Animation zwischen den beiden zu erlauben.

numeric-only

Das Standardverhalten — intrinsische Größenwerte können nicht interpoliert werden.

Beschreibung

Das Setzen von interpolate-size: allow-keywords ermöglicht die Interpolation zwischen einem <length-percentage> Wert und einem intrinsischen Größenwert. Beachten Sie, dass es nicht ermöglicht, zwischen zwei intrinsischen Größenwerten zu animieren. Ein Ende der Animation muss ein <length-percentage> sein.

Der Wert interpolate-size ist vererbt, daher kann das Animieren zu (oder von) einem intrinsischen Größenwert für ein gesamtes Dokument aktiviert werden, indem es auf der Dokumentwurzel gesetzt wird:

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

Wenn Sie den Anwendungsbereich einschränken möchten, können Sie ihn auf dem relevanten Containerelement setzen. Das Folgende ermöglicht die Interpolation von intrinsischen Größen nur für <main> und seine Nachkommen:

css
main {
  interpolate-size: allow-keywords;
}

Hinweis: Die Rückgabewerte der calc-size() Funktion können ebenfalls interpoliert werden. Tatsächlich wendet das Einschließen von calc-size() in einem Eigenschaftswert automatisch interpolate-size: allow-keywords auf die Auswahl an. Da jedoch, wie oben erklärt, interpolate-size vererbt wird, ist dies die bevorzugte Lösung, um intrinsische Größenanimationen in den meisten Fällen zu ermöglichen. Sie sollten calc-size() nur verwenden, um intrinsische Größenanimationen zu ermöglichen, wenn diese auch Berechnungen erfordern.

Werte, die interpoliert werden können

Die folgenden intrinsischen Werte können derzeit in Animationen einbezogen werden:

Formale Definition

Initialer Wertnumeric-only
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

interpolate-size = 
numeric-only |
allow-keywords

Beispiele

Grundlegende Verwendung von interpolate-size

Dieses Beispiel zeigt, wie interpolate-size: allow-keywords auf einem Dokument gesetzt wird, um Animationen zu ermöglichen, die eine intrinsische Größe umfassen. Das Demo zeigt ein Charakterabzeichen/"Namensschild", das überfahren oder fokussiert werden kann, um Informationen über den Charakter anzuzeigen. Die Anzeige wird durch einen height-Übergang zwischen einer festgelegten Länge und max-content gehandhabt.

HTML

Das HTML enthält ein einzelnes <section>-Element mit tabindex="0", damit es Tastaturfokus empfangen kann. Das <section> enthält <header> und <main> Elemente, jeweils mit ihrem eigenen Kindinhalt.

html
<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

Im CSS setzen wir zunächst interpolate-size: allow-keywords auf das :root, um es für das gesamte Dokument zu ermöglichen.

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

Dann setzen wir die height des <section> auf 2.5rem und overflow auf hidden, sodass nur das <header> standardmäßig angezeigt wird, dann spezifizieren wir einen transition, der die <section> height über eine Sekunde während des Zustandswechsels animiert. Schließlich setzen wir die <section> height bei :hover und :focus auf max-content.

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

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

Der Rest des CSS wurde der Kürze halber ausgeblendet.

Ergebnis

Versuchen Sie, über das <section> zu fahren oder es über die Tastatur zu fokussieren — es wird auf seine volle Höhe animiert und zeigt den gesamten Inhalt an.

Spezifikationen

Specification
CSS Values and Units Module Level 5
# interpolate-size

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch