t3n News Entwicklung

Transit: CSS-Transitions und -Transformationen für jQuery

Transit: CSS-Transitions und -Transformationen für jQuery

Mit Transit sollen deutlich bessere Ergebnisse als mit der normalen Animate-Funktion von möglich sein. Die Bibliothek unterstützt 2D- und 3D-Transformationen, bringt einige Easing-Methoden und noch weitere nützliche Features mit.

Transit: CSS-Transitions und -Transformationen für jQuery

transit_css3_animationen

Transit ist eine super-flüssige CSS-Transition und -Transformations-Bibliothek für jQuery mit der Transitions auf so ziemlich jede Eigenschaft des Elements angewandt werden können. Die Bedienung erfolgt über die von jQuery bekannte Syntax.

$("div").transition({ x: 200 });

Das Element wird mit den jQuery-Selektoren angesprochen. Die Funktion transition() mit mit den entsprechenden Transformations-Parametern erledigt den Rest.

Durch den Einsatz von laufen die Animationen deutlich flüssiger ab als mit der .animate()-Funktion von jQuery. Mit dem Plugin sind verschiedene 2D- und 3D-Animationen für Webseiten-Elemente möglich. Darunter Verschieben, Drehen, Skalieren und Neigen. Für einen natürlicheren Übergang stellt Transit außerdem unterschiedliche Easing-Methoden zur Verfügung und auch die Möglichkeit, eigene Transitions zu definieren.

Transit vs. CSS

Der Vorteil der Bibliothek gegenüber der Einbindung der Transformationen in den CSS-Code ist, dass du dir keine Gedanken über Browser-Prefixes und die dazugehörigen Schreibweisen machen musst, den CSS-Code sauberer halten kannst und mit der bekannten jQuery-Syntax deutlich einfacher komplexere Animationen mit dem Einsatz von Variablen entwickeln kannst.

Transit unterstützt Firefox 4+, Safari 5+, Chrome 10+, Opera 11+ und den Internet Explorer 10+. Außerdem funktioniert das Plugin mit dem mobilen Safari ab iOS4. Für ältere Browser stellt Transit leider keine Fallbacks zur Verfügung, sodass nur noch minimale Veränderungen ohne jegliche Animation möglich werden. Zur Lösung dieses Problems kann aber wieder auf die .animate()-Funktion von jQuery zurückgegriffen werden.

Mehr über das unter MIT-Lizenz stehende Plugin erfährst du auf der offiziellen Seite von Transit.

Weiterführende Links

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von marc.tissler am 31.05.2013 (09:10 Uhr)

    Für mein aktuelles Projekt evtl. zu gebrauchen, wenn man aber für einen Kunden eine große Website machen soll ist es ohne Fallbacks wenig zu gebrauchen. Alles 2 mal implementieren... evtl. könnte man ja das plugin selber ändern damit es automatisch zur animation wechsel.

    Was mich aber im vergelich zu CSS transitions stört, ist das man offensichtlich die "zurück animation" ebenfalls von hand erstellen muss.

    Antworten Teilen
  2. von Tiziano am 31.05.2013 (09:52 Uhr)

    Sehr gutes Plugin! v.a. die 3D Rotationen gefallen mir echt gut. So was gabs mit animate() bisher nicht.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema jQuery
jQuery 3.0 ist da: Das sind die wichtigsten Neuerungen
jQuery 3.0 ist da: Das sind die wichtigsten Neuerungen

jQuery ist in Version 3.0 erschienen. Wir verraten euch, was sich im Vergleich zu den älteren Versionen der Javascript-Bibliothek verändert hat. » weiterlesen

Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder

Im besten Fall sorgen CSS für kompaktes und gekapseltes Styling für Webseiten. Im Schlimmsten Fall wird CSS zur Hölle in Sachen Übersichtlichkeit und Redundanz. CSS Purge zeigt, welche Seiten die … » weiterlesen

WAIT! Animate: Schneller zu anschaulichen CSS-Animationen
WAIT! Animate: Schneller zu anschaulichen CSS-Animationen

Wait! Animate ist ein einfaches Tool um Animationen zu erstellen und zu konfigurieren, für das du kein JavaScript Know-How benötigst. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?