Responsive Flexbox-Layouts für Fortgeschrittene

Sidebar aus- und einblenden - Animation mit CSS3-Transition

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Sidebar wird mit der CSS3-Eigenschaft "transition" so animiert, dass sie sanft aus- und eingeblendet wird.

Transkript

In CSS3 wurden eine Menge CSS-Eigenschaften eingeführt, die früher entweder JavaScript- oder Graphikbearbeitungsaufgaben waren, und eine davon sind leichte Animationen, in diesem Fall eine sogenannte "Transition", die es ermöglicht, dass etwas nicht so zack, zack geht, wie hier, sondern mehr so etwas sanft, wie hier. Das ist das, was wir erreichen wollen. Das heißt, die Sidebar wird langsam ausgeblendet und kommt auch langsam wieder zurück. Das findet nur im CSS statt, mit der Eigenschaft Transition, wie gesagt, und wir haben hier "sidebar", die Klasse und "hide", die Klasse. Es ist bei den Transitions wichtig, dass "sidebar" zuerst kommt und "hide" danach. So... los geht's mit der ersten Transition. Das Wort heißt "transition"; sie sehen, da gibt's noch ein paar mehr in der Art. "transition" und jetzt kann man, was man häufig sieht, "all" animieren, das heißt alle Eigenschaften. Ich möchte das aber etwas expliziter machen, nämlich ich fange an mit der Flexeigenschaft ".5s" oder falls Sie es lieber haben, kann man auch die führende Null hier einfügen und "ease". Das heißt also, zuerst kommt die Eigenschaft, dann kommt die Dauer der Animation und dann kommt der Effekt selbst. Die zweite Eigenschaft, die hier vergeben wurde, ist "padding" und auch da "0.5s ease;". Das ist die erste Animation, die Eigenschaft "flex" und die Eigenschaft "padding", beide mit einer Dauer von 0.5 und dem Effekt "ease". Gespeichert ist, rüber in den Browser, neu laden und beim "Rausfaden" wird es schon etwas langsamer, aber beim Zurück kommt es auf... Klack, hier. Das heißt, ich muss zwei Transitions vergeben, einmal an die Klasse "hide" und einmal hier an die Sidebar selbst. Das ist fürs Rausgehen und das ist fürs Reingehen. Und wir gehen wieder rüber in den Browser und sehen: Raus etwas langsamer und rein auch etwas langsamer. Das hat schon mal funktioniert, aber wenn man genau hinschaut, dann zerfließt der Inhalt, der Text hier, der zerfließt beim Ausblenden und auch beim Einblenden. Das sieht nicht so hübsch aus. Was ich erreichen möchte ist, dass der Text erst ausgeblendet wird und dann die Sidebar wegkommt. Dazu kann man bei Transitions Verzögerungen angeben und zum Ausblenden selbst stelle ich die Color, die Textfarbe, auf Transparent. Rüber ins CSS und es geht los hier, für "hide", da kommt "color" und die Transparenz mache ich mit "hsla". Da hat man einen vierten Wert, also "0, 0%, 0%" und jetzt kommt die Transparenz, völlig durchsichtig und das Gleiche mache ich auch gleich für die Links in der Sidebar, damit... und dann diese Zeile kopiere ich, damit die ihre Textfarbe auch verlieren; so... transparent. Jetzt müssen wir nur noch "color" animieren und dazu schreibe ich das hier gleich ganz an den Anfang "color" und da sage ich mal "0.2", "ease" auch wieder und jetzt passiert das aber alles gleichzeitig. Das schauen wir uns erst mal an im Browser. Neu laden und es geht gleichzeitig weg und kommt dann wieder gleichzeitig. Und dazu wird jetzt hier eine Verzögerung eingebaut. Das ist dann der vierte Wert. Da kommt jetzt "0.3s" dahinter für das "flex" und "0.3s" für das "padding". Das heißt also: Sofort soll die Farbe animiert werden und dann mit einer kleinen Verzögerung wird "flex" und "padding" ausgeblendet. Gespeichert ist, in den Browser, neu laden und ausblenden. Achten Sie auf den Text, weg ist er und dann wird ausgeblendet. Und zurück funktioniert das noch nicht so ganz, denn da haben wir noch nichts dran gedreht. Und dazu muss das hier oben auch gemacht werden. Nur da drehen wir die Eigenschaften einfach um, weil es auch hier in umgekehrter Reihenfolge passieren soll. Das heißt also, "padding" und "flex" kommen da so rein und die Farbe kommt am Ende, "0.2s". Nehmen wir dieses Mal "ease-in", auch wenn man da kaum einen Unterschied sehen wird und wieder eine Verzögerung von 0.3. Also genau umgekehrt wie beim Ausblenden wird das hier wieder eingeblendet: "padding 0.5s", "flex 0.5s" und dann kommt die Farbe mit einer leichten Verzögerung. Und wieder neu laden und beim Ausblenden, Farbe weg, also Textfarbe weg, dann ausblenden und beim Einblenden genau umgekehrt. Erst einblenden und dann kommt der Text wieder. Perfetto!

Responsive Flexbox-Layouts für Fortgeschrittene

Sehen Sie, wie sich mit Flexbox die Art und Weise der Webseitengestaltung grundlegend verändern wird und wie Sie die TEchnologie schon heute einsetzen können.

2 Std. 25 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.10.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!