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
Much blend! So filter! Dieses Tool legt per CSS Bilder übereinander
Much blend! So filter! Dieses Tool legt per CSS Bilder übereinander

Filter Blend ist eine quelloffene Web-App, die es euch erlaubt, mit den CSS-Properties background-blend-mode und filter zu experimentieren. » weiterlesen

Die besten jQuery-Plugins: Diese Website zeigt sie euch
Die besten jQuery-Plugins: Diese Website zeigt sie euch

jQuery Cards versammelt mehr als 1.000 handverlesene Plugins für das beliebte JavaScript-Framework. Von der Navigation bis hin zur Mediensteuerung ist hier für so ziemlich jedes Einsatzgebiet was … » weiterlesen

PeekABar: Notifications leicht gemacht
PeekABar: Notifications leicht gemacht

Notifications sind ein guter Weg, um Nutzer über den Status des Systems, das sie benutzen, auf dem Laufenden zu halten. Mit jQuery.peekABar könnt ihr das sehr leicht und schnell umsetzen. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?