Transiciones y transformaciones CSS con jQuery

por .

No hace falta decir lo poderoso que resulta CSS3 a la hora de realizar transiciones, su sencillez y excelente rendimiento en navegadores modernos lo convierten en la mejor solución a la hora de realizar una tarea de estas características.

Sin embargo no siempre resulta sencillo escribir CSS que haga las transiciones y transformaciones de la forma que nosotros necesitamos, no al menos en pocas lineas de código, para facilitarnos el trabajo es que existe Transit, un plugin jQuery que se encarga de estos menesteres.

transiciones y transformaciones css3 con jQuery

Muchos se estarán preguntando la razón por las que estas acciones no las podemos realizar directamente desde jQuery, la explicación más corta es que Transit utiliza propiedades CSS3 de manera pura y exclusivamente nativa, a diferencia de jQuery que combina hojas de estilo con JavaScript.

Otro buen motivo para utilizar Transit es que su nomenclatura es idéntica a la jQuery y con un simple identificador o selector podemos animar un objeto fácilmente.

Algunos ejemplos para que entiendan lo simple que es utilizar Transit:

// Escalar un objeto
$('.box').transition({ scale: [2.0, 1.5] });

// Rotar un objeto
$('.box').transition({
  perspective: '100px',
  rotateX: '180deg'
});

// Desplazar por eje Y
$('.box').transition({ y: '40px' });

Todas las acciones se pueden combinar perfectamente. En el sitio del proyecto van a encontrar todos los ejemplos funcionando.

Finalmente, hablando de compatibilidad con navegadores, Transit es soportado perfectamente por: IE 10+, Firefox 4+, Safari 5+, Chrome 10+, Opera 11+ y Mobile Safari.

Web: Transit

Categorizado en: