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 einem intrinsischen Größenwert wie auto
, 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 zu animieren (d.h. zwischen "geschlossen" und "offen" oder "verbergen" und "zeigen" Zuständen), wenn eine Animation einer Nicht-Box-Modell-CSS-Eigenschaft, wie transform
, keine praktikable Lösung ist.
Hinweis:
Das durch interpolate-size
aktivierte Verhalten kann nicht standardmäßig im gesamten Web aktiviert werden, weil viele bestehende Webseiten Stylesheets verwenden, die annehmen, dass intrinsische Größenwerte nicht animiert werden können. Eine Standardaktivierung würde mehrere Rückwärtskompatibilitätsprobleme verursachen (siehe dazugehörige 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
-
Aktiviert Interpolation zwischen einem
<length-percentage>
Wert und einem intrinsischen Größenwert, um Animationen zwischen diesen zu ermöglichen. numeric-only
-
Das Standardverhalten — intrinsische Größenwerte können nicht interpoliert werden.
Beschreibung
Durch das Setzen von interpolate-size: allow-keywords
wird die Interpolation zwischen einem <length-percentage>
Wert und einem intrinsischen Größenwert aktiviert. Beachten Sie, dass dies nicht das Animieren zwischen zwei intrinsischen Größenwerten ermöglicht. Ein Ende 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 gesamtes Dokument ermöglicht werden kann, indem er am Dokumentenstamm gesetzt wird:
:root {
interpolate-size: allow-keywords;
}
Wenn Sie den Anwendungsbereich einschränken möchten, können Sie ihn auf dem betreffenden Containerelement setzen. Das folgende Beispiel ermöglicht die Interpolation von intrinsischen Größen nur für <main>
und seine Nachkommen:
main {
interpolate-size: allow-keywords;
}
Hinweis:
Auch die Rückgabewerte der calc-size()
Funktion können interpoliert werden. Tatsächlich wird durch das Einbeziehen von calc-size()
in einen Eigenschaftswert automatisch interpolate-size: allow-keywords
auf die Auswahl angewendet. Da interpolate-size
, wie oben erwähnt, vererbt wird, ist es in den meisten Fällen die bevorzugte Lösung, um intrinsische Größenanimationen zu aktivieren. 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 eingebunden werden:
auto
min-content
max-content
fit-content
content
(für Container, die mitflex-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 Verwendung von interpolate-size
Dieses Beispiel zeigt, wie interpolate-size: allow-keywords
auf einem Dokument gesetzt wird, um Animationen mit einer intrinsischen Größe zu ermöglichen. Die Demo zeigt ein Charakter-Abzeichen/"Namensschild", das bei Hovern oder Fokussieren Informationen über den Charakter offenbart. Das Offenbaren wird durch eine height
Transition zwischen einer festgelegten Länge und max-content
verwaltet.
HTML
Das HTML enthält ein einzelnes <section>
Element mit tabindex="0"
, sodass es über die Tastatur fokussiert werden kann. Das <section>
enthält <header>
und <main>
Elemente, die jeweils eigene untergeordnete Inhalte haben.
<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 zuerst interpolate-size: allow-keywords
auf dem :root
, um es für das gesamte Dokument zu aktivieren.
:root {
interpolate-size: allow-keywords;
}
Dann setzen wir die height
des <section>
auf 2.5rem
und overflow
auf hidden
, sodass standardmäßig nur das <header>
angezeigt wird. Außerdem spezifizieren wir eine transition
, die 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
.
section {
height: 2.5rem;
overflow: hidden;
transition: height ease 1s;
}
section:hover,
section:focus {
height: max-content;
}
Der Rest des CSS wurde aus Gründen der Kürze ausgeblendet.
Ergebnis
Versuchen Sie, über das <section>
zu hovern oder es über die Tastatur zu fokussieren — es wird zu seiner vollen Höhe animiert, wodurch der gesamte Inhalt sichtbar wird.
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)