MooTools - Fx.Morph
Fx.Morph es una función proporcionada por MooTools. Se utiliza para crear interpolaciones nuevas para transiciones entre propiedades de estilo. Mientras cambiamos, tenemos que seleccionar el elemento con un objeto y luego podemos aplicarle diferentes funciones. También necesitamos vincular el elemento con una interpolación recién creada.
Tomemos un ejemplo que proporciona tres botones en una página web. El primero es elSETbotón que crea un elemento con propiedades de estilo como altura, ancho y color. El segundo es elMORPHbotón que cambia las propiedades de estilo de un elemento. El tercero es elRESETbotón que cambia todos los ajustes a la posición inicial. Eche un vistazo al siguiente código.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphSet = function(){
this.set({
'width': 100,
'height': 100,
'background-color': '#884EA0'
});
}
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
var morphReset = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element');
var morphObject = new Fx.Morph(morphElement);
$('set').addEvent('click', morphSet.bind(morphObject));
$('start').addEvent('click', morphStart.bind(morphObject));
$('reset').addEvent('click', morphReset.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "set" value = "SET"/>
<input type = "button" id = "start" value = "START"/>
<input type = "button" id = "reset" value = "RESET"/>
</body>
</html>Recibirá el siguiente resultado: