Lassen Sie uns drei Dinge kombinieren, die wir gerade hier auf CSS-Tricks gelernt haben.
Erstens, Übergänge zu automatischen Dimensionen. Zweitens, Ajax für Inhalte auf moderne Weise. Drittens, Warten auf das Laden von Bildern, um sie zu messen.
Mit diesen drei Dingen in unserem Werkzeugkasten können wir per Ajax beliebige Inhalte abrufen und sie mit einer animierten Höhenanzeige auf der Seite einfügen. Knifflig, knifflig!
Hier ist die endgültige Demo
Sehen Sie den Pen Slide in Ajax Content von Chris Coyier (@chriscoyier) auf CodePen.
Die Überlegung hier ist, dass wir sowieso JavaScript verwenden müssen, da wir per Ajax Inhalte abrufen. Wir könnten genauso gut weiterhin JavaScript verwenden, um einen sanften Übergang zu ermöglichen.
In der großen Tradition von "Ein Skript schreiben" ist hier unseres:
- Inhalte per Ajax abrufen
- Ein Dummy-Element erstellen, das genau so breit ist wie der Bereich, in den Sie die Inhalte einfügen möchten.
- Fügen Sie Ihre Inhalte in das Dummy-Element ein.
- Dummy-Element (vorsichtig) messen.
- Fügen Sie Ihre Inhalte in das echte (und zusammengeklappte) Element ein.
- Die Höhe auf die gemessene Höhe animieren.
- Aufräumen.
Der gesamte Code ist zeilenweise im Demo kommentiert.
Das ist großartig! Ich bin vielleicht zu krank, um zu kommentieren, aber nach einem flüchtigen Blick, wäre dies nicht ein guter Ort für die FLIP-Technik, da Sie bereits Höheninformationen sammeln? https://aerotwist.com/blog/flip-your-animations/
Nur ein Gedanke. Toller Artikel! Kurz und nützlich.
In Zeile 23 im Javascript müssen Sie ein 'px'-Suffix hinzufügen, damit die Breite tatsächlich gesetzt wird.
testerElement.style.width = adZone.offsetWidth + 'px';Andernfalls ist die Höhenberechnung viel zu groß. Kein großes Problem, wenn Sie mit
max-heightanimieren, aber erwähnenswert.Sie könnten benutzerdefinierte Eigenschaften (falls möglich) verwenden und die Animation in CSS belassen.
Hier ist ein schneller Hack Ihres Beispiels.
Wenn die Demo bei Ihnen nicht zu funktionieren scheint, versuchen Sie, Ihren Adblocker auszuschalten.
Er muss das Schlüsselwort 'ad' im Code erkennen und geht davon aus, dass es sich um eine legitime Anzeige handelt.
Die Technik ist einwandfrei, aber ich möchte nur kurz erwähnen, dass ich dies für die nervigste Praxis im heutigen Web halte.
Ich lese gerne Inhalte. Ich akzeptiere, dass Anzeigen mir diese Inhalte liefern. Entwickler scheinen nach Wegen zu suchen, dieses Lesen zu erschweren. Verschieben Sie nicht Dinge, die ich gerade lese.
Ich scrolle zu einem Punkt, an dem ich den nächsten Absatz lesen kann, dann warten Sie bis zu ein paar Sekunden, während im Hintergrund eine Anzeige geladen wird, danach verschieben Sie, was ich gerade gelesen habe. Ich verliere, wo ich war.
Ich suche ein paar Sekunden herum und finde wieder, wo ich war. Ein oder zwei Zeilen weiter und BOOM, Sie entfernen die Anzeige und verschieben, was ich gerade gelesen habe, erneut.
Ich kann mir nicht vorstellen, ruhig zu bleiben, während jemand ständig meine Zeitung auf und ab schob, während ich las, weil sie mir etwas zeigen wollten.