Wenn HTML5 und CSS3 nach und nach Mainstream geworden sind, bin ich sehr daran gewöhnt, JS zu verwenden, um einige einfache Animationen zu erstellen. Denn auf Desktop -Browsern unterstützen nicht alle CSS3. Benutzer sind auch sehr seltsam. Nicht jeder Benutzer kann kultiviert werden. Es gibt immer viele Leute, die denken, dass Win7.win8 nicht so nützlich ist wie XP. Das Mobiltelefon ist jedoch ganz anders und der mobile Browser unterstützt HTML5 und CSS3 sehr gut. Die Hardwareverarbeitungsfähigkeit von Mobiltelefonen ist jedoch sehr begrenzt. Wenn heute Quad-Core- und Octa-Core-Mobiltelefone weit verbreitet sind, gibt es immer noch Leute, die Dual-Core- oder Single-Core-Mobiltelefone wie mich verwenden. Obwohl JS gut ist, habe ich nicht viel Kontakt mit Ihnen, daher kann ich dieses Gefühl nicht gut anpassen. Eine einfache Seite Swipe läuft sehr reibungslos auf dem i7-PC, aber sie ist festgefahren, stottert, stottert, stottert und stottert auf meinem Dual-Core-Telefon. Es ist sehr deprimierend. Aus diesem Grund habe ich auch lange gesucht und viel gelesen. Bevor ich mich niederließ, fand ich schließlich eine relativ einfache Methode: Verwenden Sie CSS3, um Animationen auszuführen.
In der Vergangenheit wurden zusätzlich zu den Animationsfunktionen von JQuery wie Animation, SetTimeout und SetInterval verwendet, um die Eigenschaften eines Elements wie Rand, Breite, Top usw. zu ändern. Genau das macht mich verwirrt.
Zunächst kann SetTimeout, SetInterval nicht ständig ausgeführt werden, nur durch Einstellen von 0 ms. Ich habe dieses Geheimnis einmal versehentlich entdeckt, als ich in einem iscroll debugugging. Es stellt sich heraus, dass die Berechnung der Timer-Verzögerung auf der integrierten Uhr des Browsers beruht und die Genauigkeit der Uhr von der Häufigkeit der Taktupdates abhängt. Das Update -Intervall zwischen IE8 und seinen früheren IE -Versionen betrug 15,6 Millisekunden. Es ist vorbei, ich denke, es führt eine 1px -Verschiebung in 10 ms durch und kann dies nicht rechtzeitig tun.
Und was ist mit der Karte los? Karte, weil der Code nicht gut geschrieben ist. Immerhin ist JS Single-Threaded, und sobald es zeitaufwändige Aktionen gibt, kann die Benutzeroberfläche nicht reagieren. Obwohl wir SetTimeout verwendet haben, ist dies genau daran, dass SetTimeout uns so aussehen lässt, als wäre die Schnittstelle nicht tot, aber die Aktion ist nicht reibungslos. Da diesmal vor der nächsten Ausführung nach der Ausführung von SetTimeout eine weitere zeitaufwändige Aktion im mittleren Intervall auftritt, wird die Ausführung von SetTimeout unbegrenzt. Was dann? Karte! Es gibt jedoch einen weiteren Grund, warum die Karte beim Ändern des ursprünglichen Attributs versehentlich das Browser -Layout (dh Relayout) auslösen kann. Diese Frage ist zeitaufwändig, aber zeitaufwändig. Es ist zeitaufwändig, kann aber oft ignoriert werden. Aber oft kann es nicht ignoriert werden.
Zusätzlich zu den beiden oben genannten Absätzen gibt es ein weiteres Problem, nämlich viele Mobiltelefone, es fühlt sich immer so an, als wäre es Rahmen für Frame, und es kann auch Rahmen für Rahmen lang und kurz sein. Dies ist ein Rhythmus, der alle ruinieren kann. Warum passiert das? Es hat immer noch etwas mit der Verzögerung von SetTimeout zu tun. Rahmen wegwerfen. Dieses Problem beinhaltet die Aktualisierungsfrequenz des Monitors. Es ist wirklich zu kompliziert.
Schließlich wurde CSS3 ausgewählt, JS änderte die Attribute des Elements dynamisch und der Übergang wurde verwendet, um die Ausführungszeit der Animation zu steuern. Zum Beispiel:
Die Codekopie lautet wie folgt:
<div id = "test" style = "Übergang: Alle 1S -Leichtigkeit; Breite: 100px;" >/div>
JS:
Die Codekopie lautet wie folgt:
$ ("#test"). Breite (200);
Auf diese Weise wird die Breite dieses Divs nach 1 Sekunde 200px. Es ist nicht so, dass Sun Wukong sofort größer wird, und er stürzt langsam seine Füße, ohne zu stecken oder anzuhalten. Und die Verwendung von CSS-Animationen hat einen Vorteil, sie wird nicht von zeitaufwändigen JS beeinflusst. Obwohl UI -Threads und JS -Threads in Browsern sich gegenseitig ausschließen, gilt dies für CSS -Animationen nicht, und viele Browser können auch die Beschleunigung der Hardware (z. B. Chrome) aktivieren. Obwohl in gewöhnlichen Situationen der Browser-Re-Layout nicht sehr offensichtlich ist, sollte ein Umlieger in großem Maßstab vermieden werden. Fügen Sie also -webkit -transform: translatez (0); oder -webkit -transform: Translate3D (0,0,0); Damit der Browser diese Schicht unabhängig voneinander rendert. Auch wenn die Wiederverwaltung unvermeidlich ist, ist die Fläche kleiner. Es ist in der Tat eine sehr kluge Entscheidung, Translate zu verwenden, um den Rand zu ersetzen.
Schließlich werden einige häufige Änderungen Relayout -Eigenschaften auslösen:
Die Codekopie lautet wie folgt:
Breite
Höhe
Polsterung
Marge
Anzeige
Grenzbreit
Grenze
min-hohe
Das obige ist alle in diesem Artikel beschriebenen Inhalte. Ich hoffe, es wird für alle hilfreich sein, JavaScript und CSS3 zu lernen. Gleichzeitig fügen Sie bitte einige Mängel hinzu und verstehen Sie.