Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

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 jQuery möglich sein. Die Bibliothek unterstützt 2D- und 3D-Transformationen, bringt einige Easing-Methoden und noch weitere nützliche Features mit.

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 CSS3 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

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

2 Reaktionen
Tiziano
Tiziano

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

Antworten

marc.tissler
marc.tissler

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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen