Drücke die Tasten ◄ ► für weitere Artikel  

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: CSS-Transitions und -Transformationen für jQuery

transit_css3_animationen

Transit ist eine super-flüssige CSS-Transition und -Transformations-Bibliothek für 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

50 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
6 Antworten
  1. von marc.tissler am 31.05.2013 (09:10Uhr)

    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.

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

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

  3. von web frontend | Annotary am 02.06.2013 (11:45Uhr)

    [...] from Patrick Kohan: renovierung gaming lang: sql android system Sort Share t3n.de       2 minutes [...]

  4. von Inspiration: CSS-Ladebalken und -Animati… am 16.07.2013 (08:32Uhr)

    [...] Transit: CSS-Transitions und Transformationen mit jQuery – t3n News [...]

  5. von CSS statt JavaScript: Animate.css als Al… am 25.07.2013 (21:19Uhr)

    [...] kleine, aber feine CSS-Library, die den Alltag von Entwicklern vereinfachen soll. Im Unterschied zu Transit.js basieren alle Animationen auf reinen CSS3-Klassen und bringen somit „nur“ die klassischen [...]

  6. von Bessere User-Experience und Performance,… am 22.01.2014 (12:22Uhr)

    […] Wäre es nicht schön wenn wir eine einfache Möglichkeit hätten, zu überprüfen, ob ein Browserfenster beziehungsweise ein Browser-Tab aktiv ist? Dann könnten wir sicherstellen, dass unsere Animation oder jede andere Funktion, nur dann läuft, wenn wir auch die volle Aufmerksamkeit des Benutzers haben. Eben das macht jetzt ifvisible.js. […]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema jQuery
CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch
CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch

CSS Diner ist ein kleines Spiel, bei dem ihr mit CSS-Selektoren verschiedene Elemente aus einer interaktiven Grafik auswählen müsst. In diesem Artikel zeigen wir euch, warum dieses Spiel nicht... » weiterlesen

WOW.js: Scroll-Activated-Animations mit Animate.css
WOW.js: Scroll-Activated-Animations mit Animate.css

Scroll-Activated-Animations entwickeln sich zu einem Trend in der Web-Entwicklung. Mit dem WOW.js-Skript sparst du dir bei der Erstellung solcher Webseiten eine Menge Arbeit. » weiterlesen

Auf den Viewport kommt es an: jackInTheBox pimpt Animate.css
Auf den Viewport kommt es an: jackInTheBox pimpt Animate.css

In diesem Artikel zeigen wir euch, wie ihr schnell diverse animate.css-Effekte, getriggert durch das Scroll-Verhalten, eintreten lassen könnt. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen