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 vor der Verwendung auf produktiven Webseiten.

Die interpolate-size CSS Eigenschaft ermöglicht es Ihnen, Animationen und Übergänge zwischen einem <length-percentage>-Wert und einer intrinsischen Größe, fit-content oder max-content zu aktivieren.

Diese Eigenschaft wird typischerweise verwendet, um die width und/oder height eines Containers zwischen einem <length-percentage> und der vollen Größe seines Inhalts (d.h. zwischen „geschlossen“ und „offen“ oder „versteckt“ und „offenbart“ Zuständen) zu animieren, wenn die Animation einer Nicht-Box-Modell-CSS-Eigenschaft, wie z. B. transform, keine gangbare Lösung ist.

Hinweis: Das durch interpolate-size aktivierte Verhalten kann nicht standardmäßig im gesamten Web aktiviert werden, da viele Websites in freier Natur Stylesheets verwenden, die davon ausgehen, dass intrinsische Größenwerte nicht animiert werden können. Dies standardmäßig zu aktivieren, 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 Interpolation zwischen einem <length-percentage>-Wert und einem intrinsischen Größenwert, um Animationen zwischen den beiden zu ermöglichen.
numeric-only: Das Standardverhalten — intrinsische Größenwerte können nicht interpoliert werden.

Beschreibung

Die Einstellung interpolate-size: allow-keywords ermöglicht die Interpolation zwischen einem <length-percentage>-Wert und einem intrinsischen Größenwert. Beachten Sie, dass es nicht das Animieren zwischen zwei intrinsischen Größenwerten ermöglicht. Ein Endpunkt der Animation muss ein <length-percentage> sein.

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

css

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

Wenn Sie den Geltungsbereich 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. Durch die Verwendung von calc-size() in einem Eigenschaftswert wird interpolate-size: allow-keywords automatisch auf die Auswahl angewendet. Da interpolate-size jedoch wie oben erklärt vererbt wird, ist es die bevorzugte Lösung, um intrinsische Größenanimationen in den meisten Fällen zu aktivieren. Sie sollten calc-size() nur verwenden, um intrinsische Größenanimationen zu aktivieren, wenn diese auch Berechnungen erfordern.

Werte, die interpoliert werden können

Die folgenden intrinsischen Werte können derzeit für Animationen aktiviert werden:

auto
min-content
max-content
fit-content
content (für Container, die mit flex-basis dimensioniert sind).

Formale Definition

Anfangswert	`numeric-only`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

interpolate-size = 
  numeric-only    |
  allow-keywords

Beispiele

Grundlegende `interpolate-size` Nutzung

Dieses Beispiel demonstriert, wie interpolate-size: allow-keywords in einem Dokument gesetzt wird, um Animationen mit einer intrinsischen Größe zu ermöglichen. Die Demo zeigt ein Charakter-Abzeichen/"Namensschild", das bei Hover oder Fokus Informationen über den Charakter offenbart. Die Offenbarung 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, jedes mit eigenem 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

* {
  box-sizing: border-box;
}

section {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 175px;
  border-radius: 5px;
  background: #eeeeee;
  box-shadow:
    inset 1px 1px 4px rgb(255 255 255 / 0.5),
    inset -1px -1px 4px rgb(0 0 0 / 0.5);
}

header {
  padding: 0.7rem;
  border-bottom: 2px solid #cccccc;
}

main {
  padding: 10px;
}

h2 {
  margin: 0;
  font-weight: normal;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 1px;
}

p,
li {
  font-size: 0.8rem;
  line-height: 1.5;
}

p {
  margin-top: 0;
}

Im CSS setzen wir zuerst interpolate-size: allow-keywords auf dem :root, um es für das gesamte Dokument zu aktivieren.

css

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

Dann setzen wir die <section>-height auf 2.5rem und overflow auf hidden, sodass nur der <header> standardmäßig angezeigt wird, und spezifizieren dann einen transition, der die <section> height über 1 Sekunde während des Zustandswechsels animiert. Schließlich setzen wir die <section> height auf :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 die <section> zu fahren oder sie über die Tastatur in den Fokus zu setzen — sie wird auf ihre volle Höhe animiert und enthüllt den gesamten Inhalt.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

calc-size()
Animate to height: auto; (and other intrinsic sizing keywords) in CSS auf developer.chrome.com (2024)

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden