jQuery Transit, plugin pour utiliser facilement les transitions CSS3

jQuery Transit est un plugin jQuery qui permet d’appliquer facilement des transformations et transitions CSS3 sur vos éléments HTML. Pas besoin de créer une feuille de style ; tout est géré via jQuery pour un résultat identique.

Transformations et transitions CSS3

Pourquoi utiliser un plugin jQuery pour mettre en place des transformations / transitions CSS ? Parce que la syntaxe est plus simple, plus besoin d’écrire autant de lignes de code qu’il y a de préfixes CSS, et que le contrôle est total : paramètres, fonctions de callback, et combinaison avec toutes les fonctions natives de jQuery.

Voici la liste des transformations réalisables :

  • translation : x (px), y (px) et translate (x, y)
  • rotation : rotate (deg), rotateX (deg), rotateY (deg) et rotate3d (deg)
  • zoom : scale (x, [y])
  • perspective : perspective (px)
  • inclinaison : skewX (deg), skewY (deg)

Utilisation de jQuery Transit

On commence par un inclure le framework jQuery, version 1.4 minimum, et le plugin.

<script src='jquery.js'></script>
<script src='jquery.transit.js'></script>

On définit une classe ou un id CSS sur notre élément HTML.

<div id="box"></div>

La méthode css() pour les transformations
Pour générer une transformation CSS3, jQuery Transit utilise la méthode css(). L’auteur du plugin a eu la bonne idée de « surcharger » cette fonction native de jQuery pour y ajouter les propriétés CSS3. Elle fonctionne donc exactement pareil.

$("#box").css({ x: '30px' });               // Move right
$("#box").css({ y: '60px' });               // Move down
$("#box").css({ translate: [60,30] });      // Move right and down
$("#box").css({ rotate: '30deg' });         // Rotate clockwise
$("#box").css({ scale: 2 });                // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
$("#box").css({ skewX: '30deg' });          // Skew horizontally
$("#box").css({ skewY: '30deg' });          // Skew vertical

Chaque ligne de code ci-dessus génère une transformation CSS différente. Libre à vous de les placer dans un événement jQuery (click, hover, etc). A noter également que la méthode native animate() sera incapable d’animer les propriétés CSS3 utilisées. C’est justement le rôle que remplit parfaitement jQuery Transit avec sa méthode transition() qui gère les animations.

La méthode transition() pour les animations
Pour générer une transition CSS3, il faut utiliser la méthode transition(). Elle s’utilise comme la méthode animate(), avec des paramètres de durée, de type easing, des fonctions de callback, etc.

$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                   // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');             // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});       // callback

Comme pour la transformation, vous êtes libre de déclencher la transition avec jQuery. Par exemple, pour qu’un élément HTML fasse une rotation animée de 160° au rollover et qu’ensuite il revienne à sa position initiale, on peut utiliser le bout de code suivant :

$(document).ready(function() {
   $("#box").mouseover(function() {
      $(this).transition({ rotate: '160deg' }); 
   }).mouseout(function(){
      $(this).transition({ rotate: '0deg' });
   });
});

jQuery Transit est donc très pratique pour mettre en place des opérations CSS3 rapidement, tout en héritant des avantages du framework JavaScript. Niveau support navigateur, cela ne change rien, ce sont les logiciels les plus récents du marché qui sont compatibles.

Requis : jQuery 1.4+
Compatibilité : IE 10+, Firefox 4+, Safari 5+, Chrome 10+, Opera 11+, Mobile Safari
Démonstration : http://ricostacruz.com/jquery.transit/
Licence : MIT License

Commentaires