Eine detaillierte Einführung in den Übergangsattributübergang in CSS3-Elementen

ÜbergangAnimation ist die Grundlage der Animation

Bevor wir Animation lernenEigenschaft
Wir müssen zuerst den Übergangseigenschaftenübergang verstehen

Übergang

Schauen wir uns zunächst ein kleines Beispiel an

<p class="demo"></p>

.demo {    width: 100px;    height: 100px;    background-color: royalblue;}.demo:hover {    width: 200px;}

Wenn mein Cursor einen Moment lang über der Demo schwebt
nimmt die Breite 200 Pixel an

Gibt es eine Möglichkeit, die Breite des Elements langsam breiter zu machen, wenn unser Cursor darüber schwebt?
Vor CSS3 konnten wir nur das lästige js<🎜 verwenden >SkriptAber jetzt müssen wir nur noch ein Attribut
hinzufügen, um unser Ziel zu erreichen

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s; /*增*/}.demo:hover {    width: 200px;}

Übergang Seine Funktion besteht darin, anzugeben, dass, wenn sich bestimmte Stile Ihrer Elemente ändern,

diese Stile können schrittweise zum endgültigen Eigenschaftswert übergehen

es handelt sich um eine zusammengesetzte Eigenschaft

mit den folgenden Untereigenschaften

• Übergang- Eigenschaft: Gibt das CSS-Attribut für den Übergang oder die dynamische Simulation an.

• Übergangsdauer: Geben Sie die für den Übergang erforderliche Zeit an Übergang

  Funktion

• transition-delay: Geben Sie die Verzögerungszeit für den Beginn des Auftretens an

• transition-property Wir können Schreiben Sie, welchen Attributübergang wir wollen

  Oder schreiben Sie einfach das Schlüsselwort für alle Attribute des Übergangs

  alle

Der Attributwert des Übergangszeit-Gradienten ist „Anzahl + s“
Stellt den Übergang innerhalb weniger Sekunden dar transition-timing-function ist ein optionaler Attributwert mit den folgenden optionalen Werten:

linear

Linearer Übergang, äquivalent zu Bezier Kurve (0,0, 0,0, 1,0, 1,0)

• ease (Standard)
  Glatter Übergang, äquivalente Bezier-Kurve (0,25, 0,1, 0,25, 1,0)

• Ease-in
  von langsam nach schnell, äquivalente Bezier-Kurve (0,42, 0, 1,0, 1,0)

• Ease-out
  von schnell nach Langsam, entspricht der Bezier-Kurve (0, 0, 0,58, 1,0)

• ease-in-out
  von langsam über schnell nach langsam, entspricht der Bezier-Kurve(0,42, 0 , 0,58, 1,0)

• Schritt-Start
  entspricht Schritten(1, Start)

• Schritt-
  Ende

Entspricht „steps(1, end)“

• steps():
  Schrittfunktion zweier Parameter. Der erste Parameter ist eine positive

  Ganzzahl
, die die Anzahl der Funktionsschritte angibt. Der Wert des zweiten Parameters ist Start oder Ende und gibt den Zeitpunkt an, zu dem sich der Wert jedes Schritts ändert. Der zweite Parameter ist optional und der Standardwert ist end.

• 
  cubic-bezier(num, num, num, num): Spezifischer Bezier-Kurventyp, 4 Werte müssen im Intervall [0, 1] liegen

• Die meisten davon verwenden wir nicht. Die am häufigsten verwendeten sind wahrscheinlich unsere Standard-Ease und der lineare Übergang
  

  Übergangsverzögerung ist auch ein optionaler Attributwert
Wenn Sie den Übergang verzögern möchten, mit anderen Worten, wenn wir kurz vor dem Übergang anhalten möchten

, fügen Sie am Ende dieses zusammengesetzten Attributs die Zeit hinzu, die wir zum Verzögern benötigen, „Anzahl + s“

Dieses Attribut kann mehrere verschiedene Attribute festlegen

Alles, was wir tun müssen, ist sie durch Kommas zu trennen

Nachdem sich die Maus aus dem Element bewegt hat, wechselt das Element zurück

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s linear, 
                height 1s linear,
                background-color 2s 1s; /*改*/}.demo:hover {    width: 200px;    height: 200px;    background-color: lawngreen; /*改*/}

Ein weiterer Grund für die Verwendung von Übergangsattributen anstelle von Skripten besteht darin, dass

Skriptmethoden, die die Stile mehrerer Elemente ändern, zu Konflikten führen können

Die Lösung besteht darin, boolVariablen zu verwenden

zu sperren, es ist immer noch sehr mühsam

Unser
Übergang
Attribut muss nicht so sehr berücksichtigt werdenElemente beeinflussen sich nicht gegenseitig
Noch etwas zu tun Hinweis: Elemente Der Übergang muss die spezifischen Start- und Endattribute des Stils kennen Beispielsweise wechselt die Breite in unserem Beispiel deutlich von 100 Pixel auf 200 Pixel

---

und die Breite des Aufhängungsstils wird geändert zu automatisch

Wir haben festgestellt, dass das
width-Attribut keinen Übergang durchführt, wenn der Cursor über dem Element schwebt.

.demo:hover {    width: auto; /*改*/
    height: 200px;    background-color: lawngreen; /*改*/}

Am Übergang beteiligte Attribute

Natürlich können nicht alle Stile umgestellt werden
Zum Beispiel, wenn Sie einen <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>

:block-Übergang wünschen zu

ist unmöglich

Die folgenden Attribute sind am Übergang beteiligt
<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:blockdisplay:inline-block
Farbe

• Sichtbarkeit

• Deckkraft

• vertikale Ausrichtung

• Z-Index

• Clip

• Breite/Höhe

• oben/unten/links/rechts

• Hintergrundfarbe /position

• Rahmen oben/unten/links/rechts-Farbe/Breite

• Rahmen/Buchstabe/Wortabstand

• Schriftgröße/-stärke

• Zeilenhöhe

• Rand/Padding-oben/unten/links /right

• max/min-height/width

• outline-color/width

• text-indent/shadow

Sie können sehen, dass dieses Attribut wirklich mächtig ist

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in den Übergangsattributübergang in CSS3-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!