von Andy Pillip

Android Fly-Out Effekt mit CSS 3

Listenelemente nacheinander mit CSS Transitions rein/rausfliegen lassen

Die schrittweise längere Verzögerung der Transition von Kindelementen führt zu einem Treppeneffekt – der redundante CSS-Code lässt sich mit Mixins wunderbar auf den Kern reduzieren.

Nacheinander fliegen die Listenelemente von rechts nach links in die ListeFür ein kürzlich abgeschlossenes Projekt haben wir (zumindest in der Mobilen Variante) den von Android bekannten Effekt erzielen wollen, dass die Listenelemente nacheinander in den Bildschirm fliegen.

Ein netter kleiner Effekt, der unglaublich einfach zu realisieren ist – sofern man natürlich auf ältere Browser keine Rücksicht nimmt. Aber schlussendlich geht's ja nur um Eye-Candy.

In Android fliegen die Listenelemente beim Leeren von Listen aus dem Bildschirm heraus, bei uns fliegen sie eben beim Öffnen der Liste hinein.

Transitions für den Fly-In Effekt

Dafür zu sorgen, dass Elemente aus dem Bildschirm hinaus fliegen, ist einfach: Die Elemente werden relativ positioniert, die left-Koordinate wird mit transitions animiert:

ul {
  overflow: hidden;
  }
  ul li {
    position: relative;
    left:0;
    transition: left .4s;
    }
      ul.closed li {
      left: 110%; /* out of container */
      }

Beim Schließen des ul fliegen also alle li gleichzeitig zum rechten Rand hinaus, beim Öffnen hinein.

Aber wir möchten ja erreichen, dass die Elemente nacheinander abheben. Hierfür muss einfach die transition von jedem Listenelement etwas mehr verzögert werden (das erste wird nicht verzögert):

ul li:nth-child(2) {
  transition-delay: .2s;
  }
ul li:nth-child(3) {
  transition-delay: .4s;
  }
ul.li:nth-child(4) {
  transition-delay: .6s;
  }

Generisches Verzögern mit SASS (oder LESS)

Dem Programmierer dürfte bei der eben beschriebenen Lösung gleich aufstoßen, dass wir hier unglaublich stupiden Code mehrfach schreiben – was ihr vermutlich auch schon bei anderen CSS-Projekten aufgefallen ist.

Der Griff zu SASS lässt uns besseren Code schreiben: Wir können mit einem einfachen Mixin und einer Schleife die Selektoren für n Listenelemente generieren lassen:

=transitionDelayN($n, $factor)
  @for $i from 2 through $n
    &:nth-child(#{$i})
      transition-delay: $factor*($i -1)

ul li
  +transitionDelayN(10, .2s)

Leider liegt in der Natur von CSS, dass sich solche Konstrukte nicht generisch beschreiben lassen – weshalb wir immer auf eine bestimmte Anzahl von Elementen beschränkt werden.

Aber dieses Beispiel zeigt, wie schön sich eben solche Muster mit Mixins generieren lassen, was redundanten Code vermeidet.