Heim > Artikel > Web-Frontend > Was sind die auslösenden Methoden für den CSS3-Übergang?
Was sind die auslösenden Methoden für den CSS3-Übergang?
- 青灯夜游Original
- 2021-12-15 11:20:192743Durchsuche
css3-Übergang verfügt über zwei Auslösemethoden: 1. Ausgelöst durch Pseudoklassenelemente, einschließlich „:hover“, „:focus“, „:checked“ usw.; 2. Ausgelöst durch JS, mit js- oder Jquery-Code zum Ändern CSS-Attribute, wodurch der Verlauf des Übergangs ausgelöst wird.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Übergang
Übergang ist die einfachste Animation in CSS3. Der folgende Code ist ein Beispiel aus w3c. Das Ergebnis ist das Hinzufügen eines Übergangs , die Länge Es wird schrittweise auf 300 Pixel erhöht Wir verwenden meistens JS oder Jquery, um Attribute direkt zu ändern, aber ich habe festgestellt, dass dies bei der Arbeit nicht funktioniert.
Zweitens: Ausgelöst durch JS
Wenn Sie JS oder Jquery verwenden, um CSS-Eigenschaften direkt zu ändernDie JS-Auslösemethode sollte darin bestehen, dass sich ihre Klasse ändert, damit neue Stile erhalten werden können.
Mein Verständnis ist, dass das Element geändert werden muss, damit es einige neue Attribute erhalten kann. Bei der JS-Triggerung sollte es so sein, dass sich seine Klasse ändert, damit neue Stile möglich sind erhalten werden.
Durch Hinzufügen einer neuen Klasse zu p, wodurch sich p ändert und die Klasse erhält, kann der Gradient des Übergangs ausgelöst werden. <!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html> (Lernvideo-Sharing:
)
Das obige ist der detaillierte Inhalt vonWas sind die auslösenden Methoden für den CSS3-Übergang?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!