Jemals gefragt, wie das mit den Button von Google Material Design funktioniert, dass abhängig von der Position des Klicks die Animation ausgeführt wird? Im Grunde gar nicht so kniffelig. Man nehme ein Button-Element, füge ein Element als Container und ein weiteres für die Animation selbst hinzu, dann noch CSS3 und ein wenig Javascript und schon ist die der Button reaktiv:

See the Pen Material Design Button Effect by John (@herr_john) on CodePen.

Das Element zum Animieren bekommt die doppelte Größe des Buttons (Quadrat) und ein border-radius von 50%. Dies hat den Sinn, dass sie auch dann groß genug ist, wenn sie am äußersten Rand gestartet wird. Der border-radius sorgt für den radialen Effekt. Mit CSS3 Transformation wird dann mittels transform: scale(.1) das Element im Basiszustand verkleinert und mittels translate(-50%, -50%) zentriert. transition: .3s; gibt die Dauer der Animation und transition-property: opacity, transform; die Eigenschaften, die animiert werden sollen an. Dies ist notwendig, damit der Positionswechsel der Animation nicht mit animiert wird.

Zu beachten ist, dass in dieser Demo mit autoprofixer gearbeitet wurde, also nicht explizit die Browser-Prefixe gesetzt wurden.

Neuen Kommentar schreiben