CSS3 + HTML5 + JS realisiert den Schrumpf- und Expansionsanimationseffekt eines Blocks
|
Als ich kürzlich an einem Projekt arbeitete, stellte ich fest, dass ich die Animationstechnologie in CSS3 in meinem Projekt selten verwendete. Normalerweise wurden die schrumpfenden und expandierenden Animationseffekte einiger Listenblöcke fast immer durch none und block von display oder hidden und visual von visibility gesteuert. Daher habe ich im letzten Projekt begonnen, die CSS3-Animationstechnologie eingehend zu studieren und auf das Projekt anzuwenden. Das Folgende ist die Schrumpf- und Erweiterungsanimation des Listenblocks. Ein einfaches Effektdiagramm
Umsetzungsideen Generell unterteilen wir den Listenblock in einen Titelblock und einen Inhaltsblock. (1) Titelblock: zeigt den Titel und ein Symbol mit schrumpfenden und expandierenden Animationseffekten an ① Für den Symbolteil können wir die Pseudoklasse verwenden, um den Pfeil zu zeichnen, und die Rotationseigenschaft der Transformation verwenden, um die Richtung des Symbols und seinen Animationseffekt zu steuern . ②Animationssteuerung. Normalerweise wird die Liste verkleinert und erweitert, wenn Sie auf den Titel klicken. Wenn Sie also auf den Titel klicken, müssen Sie die Klasse steuern. (2) Inhaltsblock: Der Inhaltsblock zeigt den Inhalt an und führt den wichtigsten Animationseffekt aus – das Verkleinern und Erweitern der Liste. ① Animationseffekt: Für die Animation dieses Blocks besteht unsere Idee darin, die Höhe des gesamten Blocks zu verringern und den Inhalt links auszublenden. Daher müssen wir die Höhe steuern und die Animation ausblenden. Daher verwenden wir max-height zur Höhensteuerung und zum Übergang (Animationszeit festlegen) und das Attribut „translate“ von transform, um den Inhalt auszublenden. Der vollständige Code lautet wie folgt:
<!DOCTYPE html>
<html>
<Kopf>
<Titel></Titel>
<style type="text/css">
.block_wrap {
Breite: 500px;
Rand: 0 automatisch;
Rand: 1px durchgezogen #e3e3e3;
Rahmenradius: 10px;
}
.Kapitel_Wrap {
Hintergrund: weiß;
Textausrichtung: links;
Rahmenradius: 8px;
Farbe: #333333;
Rand unten: 15px;
Schriftgröße: 14px;
Überlauf: versteckt;
}
.Titelelement_Wrap {
Polsterung: 10px 10px 10px 0;
Rand: 0 10px 0 10px;
Rahmen unten: keiner;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
}
/*Pseudoklassen zum Malen von Symbolen verwenden*/
.title_item_wrap::nach {
Inhalt: '';
Breite: 10px;
Höhe: 10px;
Rahmen oben: 2px durchgezogen #999999;
Rahmen rechts: 2px durchgezogen #999999;
transformieren: drehen (-45 Grad);
Anzeige: Inline-Block;
Übergang: 0,3 s;
schweben: rechts;
Rand oben: 10px;
}
/*Verwenden Sie die aktive Klasse, um die Drehung des Symbols und des unteren Rands des Titels beim Erweitern zu steuern*/
.aktiv {
Rahmen unten: 1px durchgezogen #F0F0F0;
}
.aktiv::nach{
transformieren: drehen (135 Grad);
Rand oben: 5px;
}
.Kapiteltitel {
Schriftgröße: 16px;
Polsterung: 0;
Rand: 0;
Breite: berechnet (100 % – 30 Pixel);
}
.node_wrap {
Überlauf: versteckt;
Überlauf-y: scrollen;
Übergang: 0,3 s;
}
.node_wrap p {
Polsterung: 0 20px 5px 20px;
Rand: 10px 0;
Rahmen unten: 1px durchgezogen #e3e3e3
}
/*Den Slider des Inhaltsblocks ausblenden*/
.node_wrap::-webkit-scrollbar {
Anzeige: keine;
}
/*Steuern Sie das Ausblenden des Inhaltsblocks. Wenn er ausgeblendet ist, wird der gesamte Block um 200 % der Breite nach links verschoben und die maximale Höhe wird auf 0 gesetzt, andernfalls bleibt die Seite leer*/
.node_wrap_hide {
transformieren: übersetzen(-200 %, 0);
maximale Höhe: 0;
}
/*Steuern Sie die Anzeige von Inhaltsblöcken. Bei der Anzeige wird der gesamte Block rechts wiederhergestellt und die maximale Höhe auf 300 Pixel festgelegt. Der Inhalt darin erweitert den Block*/
.node_wrap_show {
transformieren: übersetzen(0, 0);
maximale Höhe: 300px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="block_wrap">
<div id="block_wrap" Klasse="title_item_wrap aktiv">
<p class="chapter_title">Kapitelname</p>
</div>
<div id="Listenwrap" Klasse="Knotenwrap Knotenwrap_Show">
<p>Abschnittsname 1</p>
<p>Abschnittsname 2</p>
<p>Abschnittsname Drei</p>
<p>Abschnittsname 4</p>
<p>Abschnittsname Fünf</p>
<p>Abschnittsname Sechs</p>
<p>Abschnittsname 7</p>
<p>Abschnittsname acht</p>
<p>Abschnittsname Neun</p>
<p>Abschnittsname 10</p>
</div>
</div>
</body>
<Skripttyp="text/javascript">
// Titelelement abrufen var block_wrap = document.getElementById('block_wrap')
//Fügen Sie dem Titelelement ein Klickereignis hinzu und erzielen Sie einen Animationseffekt, indem Sie durch Klicken Steuerklassen hinzufügen und entfernen block_wrap.onclick = function() {
// Holen Sie sich das Titelelement className-Sammlung let classArray = this.className.split(/\s+/)
// Holen Sie sich das Inhaltsblockelement let list_wrap = document.getElementById('list_wrap')
// Bestimmen Sie, ob das Titelelement die Klasse „active“ hat. Wenn ja, bedeutet dies, dass die Liste erweitert ist. Wenn Sie darauf klicken, wird der Inhaltsblock ausgeblendet, andernfalls wird der Inhaltsblock angezeigt, wenn (classArray.includes('active')) {
//Inhaltsblock ausblenden block_wrap.classList.remove('active')
list_wrap.classList.entfernen('node_wrap_show')
list_wrap.classList.add('node_wrap_hide')
Konsole.log(dieser.Klassenname.split(/\s+/))
zurückkehren
} anders {
// Inhaltsblock anzeigen block_wrap.classList.add('active')
list_wrap.classList.add('node_wrap_show')
list_wrap.classList.entfernen('node_wrap_hide')
zurückkehren
}
}
</Skript>
</html>Kopieren Sie den obigen Code direkt in die HTML-Datei und speichern Sie ihn, um den Effekt zu sehen. Dieser Animationseffekt ist für mobile Geräte geeignet. Auf der PC-Seite wird es einige Mängel geben, die leicht behoben werden können. Damit ist dieser Artikel über die Verwendung von CSS3+HTML5+JS zum Erzielen des Schrumpf- und Expansionsanimationseffekts eines Blocks abgeschlossen. Weitere verwandte Inhalte zu HTML5-Expansions- und Schrumpfanimationsinhalten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Tutorial zur Installation des AutoFs-Mount-Dienstes unter Linux
>>: Einführung in HTML für Frontend-Entwickler
Artikel empfehlen
Häufige Linux-Fehler bei der chinesischen Übersetzung (Neulinge müssen das wissen)
1.Befehl nicht gefunden Befehl nicht gefunden 2. ...
RHCE installiert Apache und greift mit einem Browser auf IP zu
1. at ist so konfiguriert, dass nach 5 Stunden „D...
Tutorial zur kostenlosen Konfiguration der MySQL 5.7.19 Winx64-Installationsversion
Konfigurationsmethode für die installationsfreie ...
Über die MariaDB-Datenbank unter Linux
Inhaltsverzeichnis Über die MariaDB-Datenbank unt...
So wählen Sie das Format bei der Verwendung von Binlog in MySQL
Inhaltsverzeichnis 1. Drei Binlog-Modi 1.Anweisun...
So verwenden Sie den Yum-Befehl
1. Einführung in yum Yum (vollständiger Name Yell...
Drei Möglichkeiten zum Aktualisieren von Iframes
Code kopieren Der Code lautet wie folgt: <ifra...
Detaillierte Erläuterung der Installation und Verwendung von Crontabs für geplante Linux-Aufgaben
Crontab installieren yum install crontabs CentOS ...
Vollständige Schritte für dynamische Bindungssymbole in Vue
0 Unterschiede zwischen Symbolen und Bildern Symb...
Verstehen Sie den aktuellen Status der HTML5-Entwicklung in der mobilen Entwicklung genau
„Wir schreiben unsere nächste Reihe mobiler Produ...
CocosCreator allgemeines Framework-Design Ressourcenmanagement
Inhaltsverzeichnis Probleme mit der Ressourcenver...
So lösen Sie das Problem der automatischen Paketaktualisierung im Debian-System
Ich weiß nicht, wann es angefangen hat, aber jede...
Alibaba Cloud Ubuntu 16.04 baut IPSec-Dienst auf
Einführung in IPSec IPSec (Internet Protocol Secu...
Implementierung der CSS-Transformation des Seitenumblätter-Animationsdatensatzes
Szenario mit dem Problem des Seitenumblätterns B ...
Eine kurze Diskussion über MySql-Ansichten, Trigger und gespeicherte Prozeduren
Sicht Was ist eine Ansicht? Welche Rolle spielt e...