<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=982826425155997&amp;ev=PageView&amp;noscript=1">

CSS3 keyframes für "display" Attribut

Mit CSS keyframes könne viele Animationen ohne Javascript direkt im CSS abgebildet werden. Doch nicht bei allen Eigenschaften ist dies ohne weiters möglich. Wie kann die Eigenschaft "display" zusammen mit CSS keyframes verwendet werden?

browsers-bg_2

Problem

HTML Elemente (Eingabefeld inklusive Label ) die mithilfe der CSS Eigenschaft "display:none" ausgeblendet sind, sollen mit Klick auf einen Link animiert erscheinen. Diese Animation soll mithilfe von CSS realisiert werden und an meheren Stellen im Programm verwendbar sein. 
 

Lösung

Warum nicht "visibility"?

Anstatt "display" könnten wir die Eigenschaft "visibility" einsetzen, den hierfür steht uns eine entprechende Animation zur Verfügung.  Elemente mit dieser Eigenschaft werden zwar unsichbar, belegen jedoch Platz in der Anzeige. Daher scheint diese Eigenschaft eher ungeignet für Elemente, die übereinander liegen.

Better go with "opacity"!

Nun gibt es zu Glück noch eine Eigenschaft die Elemente verschwinden lassen kann "opacity". Und genau diese machen wir uns hier zu nutze.  

 

HTML

Im  HTML erstellen wir zunächst unseren Link und das Label mit Eingabefeld. Das alles umschließen wir mit einem "div" Container. Wichtig ist hier die Klasse "link". Warum, dazu gleich mehr.

 

Javascript

Auch unser Javascript soll so schlank wie möglich bleiben. Sobald der Link inherhalb unseres Containers "linkWithHiddenContent" aufgerufen wird, entfernen wir die Klasse "link" vom Container. Alls kleines Extra wird auch das erscheinende Eingabefeld fokusiert.

Anmerkung: Hierbei wird die Javascript Bibliothek jQuery verwendet.

 

CSS

Nun kommen wir zum spannenden Teil. Zunächst sorgen wir dafür, dass in unserem Container nur der Link angezeigt wird, solange die Klasse "link" gesetzt wird. Ist diese Klasse nicht gesetzt, ist das Verhalten genau umgekehrt. Doch wenn Label und Eingabefeld sichtbar sind, wird ein keyframe ausgeführt, der den Wert für "opacity" von 0 nach 1 setzt

 

Ergebnis

Fertig. Der Vorteil dieser Lösung liegt an der Wiederverwendbareit. Egal an welcher Stelle dieses Verhalten benötigt wird, muss nur das obige HTML eingefügt werden. Danach können Bezeichnungen und Typ des Eingabfeldes beliebig angepasst werden. 

Alois Wever Veröffentlicht in HTML & CSS 0 Comments

Einfach organisiert mit julitec

Kostenfrei starten mit julitec Free!

Sichern Sie sich unser eBook!

Download eBook mit 5 kostenfreien Software-Tools für Newsletter, CRM und Kundenservice