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

Newsletter Newsletter

Abonniere unseren Newsletter und erhalte einen exklusiven Artikel aus dem aktuellen t3n Magazin.

Jetzt lesen: t3n Newsletter Nr. 571

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
14 JavaScript-Funktionen und jQuery-Plugins für praktische Features und schicke Effekte
14 JavaScript-Funktionen und jQuery-Plugins für praktische Features und schicke Effekte

Fast täglich werden neue JavaScript-Bibliotheken und -Plugins veröffentlicht. Einige nützliche Helfer und Effekte haben wir in diesem Artikel zusammengetragen. » weiterlesen

Gradify: Skalierbare CSS-Platzhalter für dein Web-Projekt
Gradify: Skalierbare CSS-Platzhalter für dein Web-Projekt

Ihr kennt das: Die Bilder für eine Website sind noch nicht fertig geladen, und dadurch sieht das Projekt einfach nicht gut aus. Gerade in Zeiten des mobilen Internets ein Ärgernis. » weiterlesen

Bootstrap: Mit diesen 15 Tools und Erweiterungen holst du mehr aus Twitters Framework raus
Bootstrap: Mit diesen 15 Tools und Erweiterungen holst du mehr aus Twitters Framework raus

Bootstrap 3 von Twitter bietet eine ausgezeichnete Grundlage für die Webentwicklung. Wir stellen euch zehn Tools und Erweiterungen vor, mit denen ihr noch mehr aus der aktuellen Version rausholt. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?