Einheitliche Animationen erstellen

Damit eine Webseite oder App gut aussieht werden heutzutage viele Animationen mit der transition Property verwendet. Doch damit es wirklich rund wirkt sollten die Animationen bis auf wenige Ausnahmen die gleiche Dauer und das gleiche Timing haben. Die Frage wie man das in großen Projekten sicherstellen kann wird in diesem Artikel beantwortet.

SASS Variablen

Die erste Möglichkeit sicherzustellen, dass die transition durchgehend gleich ist wäre Variablen anzulegen und zu verwenden.

// Setzen
$default-transition-duration: 200ms;
$default-transition-timing: ease-in-out;
$default-transition-delay: 0ms;
$default-transition: $default-transition-duration $default-transition-timing $default-transition-delay;

// Verwenden von $default-transition
.menu {
  transition: transform $default-transition;
  // transition: transform 200ms ease-in-out 0ms;
}

// Verwendung von einzelnen Properties
.hamburger {
  transition-duration: $default-transition-duration;
  // transition-duration: 200ms;
}

Dieses Vorgehen funktioniert sehr gut. Jedoch gibt es ein Problem: es wird bei häufiger Verwendung sehr viel identischer Quellcode produziert.

.menu {
  transition: transform $default-transition, width $default-transition, height $default-transition, padding $default-transition, margin $default-transition, top $default-transition;
  // transition: transform 200ms ease-in-out 0ms, width 200ms ease-in-out 0ms, height 200ms ease-in-out 0ms, padding 200ms ease-in-out 0ms, margin 200ms ease-in-out 0ms, top 200ms ease-in-out 0ms;
}

Wenn abzusehen ist, dass das zu einem (Performance-)Problem werden könnte, so sollte man die nächste Lösung wählen.

Globales setzen von Animationen

Bei diesem Vorgehen ist die Idee für alle Elemente (*) einmalig die Eigenschaften transition-duration, transition-timing und transition-delay zu setzen und anschließend nur noch die transition-property anzugeben.

*,
*::before,
*::after {
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0;
  transition-property: none;
}

.menu {
  transition-property: transform, width, height, paddding, margin, top;
}

Dieses Vorgehen ist von mir getestet worden und führte zu keinen Problemen. Die Hürde hierbei ist allen beteiligten Entwicklern mitzuteilen, dass die transition-property zu verwenden ist.

Zusammenfassung

Damit Animationen einheitlich dargestellt werden sollte man sich im Voraus Gedanken machen, ob und wenn ja mit welcher der beiden beschriebenen Strategien man das sicherstellen möchte. Natürlich kann man auch die beiden Strategien kombinieren und beim globalen Setzen von Animationen bereits Variablen verwenden und diese bei Bedarf an anderen Stellen wiederverwenden.