Uninstallme

Mootools es una librería Javascript muy parecida a Prototype pero que permite crear efectos de movimiento, opacidad, color, etc. sin necesidad de usar una librería adicional como Scriptaculous. Su peso comprimida es de 60Kb y tiene una muy buena documentación también disponible offline. Además es una de las librerías Javascript que podemos encontrar en las librerías Ajax de Google.

Para crear efectos de transición con Mootools usamos la clase Fx.

Fx.Tween: transición del valor de una sola propiedad CSS

Con Fx.Tween podemos crear un efecto de transición de una sola propiedad CSS. Por ejemplo, cambiar de un color de fondo a otro, cambiar un ancho, color de texto o incluso posición de una imagen de fondo.

Para ello usamos el método abreviado Element.tween

Ejemplos:

el.tween('color', '#f30'); // "el" hace referencia a un enlace con una clase determinada
el.tween('width', '300px'); // el elemento aumentará o disminuirá (dependiendo del tamaño previo) progresívamente su tamaño
el.tween('background-position', '0 -35px'); // movemos una imagen de fondo 35 píxeles hacia arriba

También podemos establecer la duración que tendrá el efecto:

el.set('tween', {duration: 500});
el.set('tween', {duration: 'long'});

Usando una transición del valor de la propiedad background-position, podemos conseguir efectos como este:

• lorem
• ipsum
• dolor
• lorem

Usando un png transparente de 24 bits como imagen de fondo y cambiando la propiedad background-color:

Botón

Hay que tener en cuenta que usando este método tendremos que hacer “apaños” adicionales para que el png de 24 bits sea transparente en Internet Explorer 6.

Visibilidad y destacado con fade() y highlight()

Estos dos métodos funcionan de forma similar a Fx.Tween. En el caso del método fade(), las propiedades CSS con las que se juega son visibility y opacity, mientras que con highlight() la propiedad CSS es background-color.

El método fade() admite los siguientes valores:

• in: cambia la opacidad progresívamente a 100
• out: cambia la opacidad progresívamente a 0
• show: cambia la opacidad a 100 sin transición
• hide: cambia la opacidad a 0 sin transición
• toggle: si el objeto es visible lo hace invisible y viceversa
• (valor numérico de 0 a 1. Ej: 0.5): cambia la opacidad al valor especificado

En todos estos casos se utiliza la propiedad visibility para mostrar u ocultar el elemento en vez de display, por lo que el elemento al que se aplica el efecto sigue manteniendo su espacio en pantalla cuando se oculta.

Ejemplo con fade(‘out’):

Click para ver un efecto

El método highlight() aplica una transición del color de fondo, que por defecto se transforma en un amarillo claro (#ff8)

Admite los siguientes valores:

• (un color hexadecimal o nombre de color css): cambia el color al especificado
• (dos colores separados por comas): cambia el color de fondo del color inicial (primer valor) al color final (segundo valor)

Ejemplo con highlight() sin especificar ningún color de fondo:

Click para ver un efecto

Fx.Morph: transición de varias propiedades CSS a la vez

Fx.Morph permite cambiar el valor de varias propiedades CSS a la vez.

Creamos una instancia de la clase Fx.Morph en la que declaramos a qué elemento se aplicará y el comportamiento que tendrá: duración, tipo de transición, unidad de medida (px, em o %), comportamiento ante eventos ocurridos durante la transición (esperar a que acabe la transición, dar prioridad a otros eventos, etc.) o función que se ejecutará cuando la transición finalice.

var transicion1 = new Fx.Morph(el,{
	duration: 800,
	transition: Fx.Transitions.Elastic.easeOut,
	link: 'ignore',
	onComplete: function(){
		el.set('text', 'Mootools mooola!');
	}
})

Después la iniciamos mediante su método start y definimos las propiedades CSS que cambiarán.

el.addEvent('click', function(e){
	transicion1.start({
		'width': [300, 350],
		'background-color': '#fce30d',
		'border-color': '#fff',
		'text-align': 'center',
		'line-height': 50,
		'left': '-100px'
	})
	Event.stop(e);
})

En el ejemplo de código he destacado los valores [300, 350], que aparecen sin comillas ni unidad de medida. La unidad de medida por defecto es el píxel. Podemos especificar otra unidad de medida al instanciar la clase Fx.Morph mediante la propiedad unit.

Ejemplo de transición con Fx.Morph:

Click para ver un efecto

Código con todos los ejemplos en pastie.org