interpolate-size
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
/* 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:
: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:
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:
auto
min-content
max-content
fit-content
content
(für Container, die mitflex-basis
bemessen sind).
Formale Definition
Initialer Wert | 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 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.
<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.
: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
.
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
calc-size()
- Animate to height: auto; (and other intrinsic sizing keywords) in CSS auf developer.chrome.com (2024)