Transit : gérer ses animations CSS3 avec jQuery

Envie de manipuler librement et facilement des animations et des styles CSS3 dans votre code jQuery ? Transit est donc un plugin fait pour vous. Vous allez voir qu’il est très souple et très simple d’utilisation grâce au petit tutoriel qui va suivre. Je vous invite aussi à visiter le site officiel, très bien fait et qui contient beaucoup d’exemples.

Pourquoi ne pas continuer à utiliser notre bon vieux jQuery pour faire des animations ?

Contrairement à jQuery, les animations de Transit vont modifier les propriétés CSS3. Cela va permettre un gain de performance (et donc de fluidité) non négligeable, surtout si vous voulez adapter votre site ou votre application sur mobile.

Installation du plugin

Pour utiliser ce plugin, il vous suffit de le télécharger et de l’inclure dans votre projet. Bien évidemment, ce plugin doit être inclut après votre ficher jQuery. Pour information, Transit est compatible avec jQuery 1.4+ .

Manipulation des transformations CSS3

Avant tout, par rapport à du code jQuery classique, ce plugin permet de manipuler plus facilement les transformations CSS3 de vos éléments HTML.
Dans l’exemple ci-dessous, on agrandi un carré en en modifiant sa propriété CSS3 scale quand la souris le survole. Cette opération est simple à réaliser en jQuery mais encore plus rapide avec Transit.

Exemple

$("#exemple1")
		.on("mouseenter", function() {
			$(this).find(".carre").css({scale: 2});
		})
		.on("mouseleave", function() {
			$(this).find(".carre").css({scale: 1});
		});

Comme vous pouvez le constater, une seule ligne de code suffit pour transformer le carré. Voyons maintenant ce que ça donne avec du jQuery classique :

$("#exemple1")
		.on("mouseenter", function() {
			$(this).find(".carre").css({
				"-webkit-transform" : "scale(2)",
				"-ms-transform" : "scale(2)",
				"-o-transform" : "scale(2)",
				"-moz-transform" : "scale(2)",
				"transform" : "scale(2)",
			});
		})
		.on("mouseleave", function() {
			$(this).find(".carre").css({
				"-webkit-transform" : "scale(1)",
				"-ms-transform" : "scale(1)",
				"-o-transform" : "scale(1)",
				"-moz-transform" : "scale(1)",
				"transform" : "scale(1)",
			});
		});

La nombre de ligne augmente un peu ! En effet, dans ce cas, vous utilisez la méthode css() de jQuery ce qui vous oblige à indiquer au navigateur qu’il doit utiliser une transformation, contrairement à Transit qui permet de n’indiquer que la propriété à modifier (ici scale). De plus, vous devez prendre en compte tous les préfixes avant l’attribut transform afin que votre code soit compatible tout navigateur.

Grâce à ce plugin, vous pourrez donc agir facilement sur les transformations suivantes :

• x(px), y(px), translate(x, y) : propriétés qui vont tous agir sur l’attribut translate de l’élément
• rotateX(deg), rotateY(deg), rotate(deg), rotate3d(x, y, z, deg)
• skewX(deg)
• skewY(deg)
• scale(x, [y])
• perspective(px)

Et maintenant, le plus intéressant : les animations !

Transit vous donne la possibilité d’animer vos éléments HTML grâce à la méthode $.fn.transition() qui fonctionne exactement de la même manière que celle de jQuery : $.fn.animate(). Vous ne serez donc pas dépaysé ! Pour rappel, voici sa signature :

$('...').transition(options, [duration], [easing], [complete])

Cette méthode contient :

• options : animation à déclencher. Possibilité d’y mettre aussi les options qui suivent et le dalay avant le déclenchement de l’animation (delay)
• duration : durée de l’animation (ms)
• easing : timing de l’animation (rapide au début et lente à la fin, …)
• complete : fonction de callback qui se déclenche un fois l’animation terminée

Exemple

Nous allons reprendre l’exemple précédent mais en lui ajoutant une animation :

$("#exemple2")
		.on("mouseenter", function() {
				$(this).find('.carre').transition({scale: 2}, 100, 'linear');
		})
		.on("mouseleave", function() {
				$(this).find(".carre").css({scale: 1});
		});

Nous allons maintenant lui donner une seconde animation en même temps que le zoom et un délai avant le déclenchement. Vous verrez qu’il est aussi possible de passer la valeur de duration, easing et complete dans l’argument options :

$("#exemple3")
		.on("mouseenter", function() {
				$(this).find('.carre').transition({
					scale: 2, x: 30,
					delay: 500,
					duration: 100,
					easing: 'linear'
				});
		})
		.on("mouseleave", function() {
				$(this).find(".carre").css({scale: 1, x: 0});
		});

Voilà, ce petit tutoriel est terminé et encore une fois, n’hésitez pas à consulter le Site officiel Transit pour y découvrir toutes les petites subtilités de ce plugin (différentes syntaxes possibles, animations à la chaine…) ! 🙂