Efecto Mootools tras cargar peticion Ajax

[shakaran]

Hola, utilizo mootools mucho en mi web y me gustan mucho sus efectos, pero tengo una gran duda a la hora de crear uno.

Mi problema se encuentra en que quiero hacer una peticion ajax, para cargar un contenido en un div, pero que cuando este div se cargue, pase de tener 0 de altura, a la altura que tenga que tener al ser cargada (no puedo ponerle 300 o 400 o una definida, porque antes y despues tengo mas divs, y se descolocarian haciendo un efecto incomodo).

Por lo tanto, necesito obtener la altura del contenido recibido en la petición ajax, obtener su altura y hacer un fx (y no es un slideOut, porque lo que quiero es meterle una transicion "Fx.Transitions.Bounce.easeOut" para que haga un efecto rebote).

Si alguno conoce la clase de mootools llamada MooTab, habra visto que justo es ese el efecto que hace, que justo al cargar la pestaña (o tab) hace una transición, pero esta clase, juega con trampa, porque obtiene la altura de la pestana cuando se predefine el alto y ancho del espacio que ocuparan las pestañas.

Bueno he hecho un intento que consiste en:

Código:

new Ajax(url,

			{

				update:$('div'),

				onComplete: function()

				{

					alert("completado "+$('crear_reto').getSize().size.y)

                                        //Segunda llamada que se produce, pero esta es cuando el contenido se ha cargado, podria obtener la altura, pero si ya se muestra el contenido no me valdria, tiene que ser obtener la altura, y hacer el efecto mientras se muestra el contenido
				},

				onRequest: function()

				{

					alert("request "+$('crear_reto').getSize().size.y)
                                        //Primera llamada que se carga, pero aun no  tengo el contenido y devuelve 0 de alto

					

				},	

				onSuccess: function()

				{

					alert("onSuccess=exito "+$('div').getSize().size.y)

                                        //Tercera llamada que se carga, ya tendria la altura, pero el onComplete muestra el contenido y quedaria feo hacer el efecto
				},	

				onStateChange: function()

				{

					alert("change "+$('div').getSize().size.y)
                                        // Si cambiar el estado

				},

				onFailure: function()

				{

					alert("fallo "+$('div').getSize().size.y)

                                          //Este no tiene sentido, pero lo pongo por probar
				}

				

			}).request();

Alguien tiene alguna sugerencia de como podria hacer esto?
Gracias

[shakaran]

He conseguido avanzar en el problema. Ahora ya funciona, pero la altura "parpadea" del total a 0 y luego hace el efecto.

Este el código:

Código:

onSuccess: function()
{
	$('test').setHTML(this.response.text)
	var actualHeight=$('test').getStyle('height').toInt() //PROBLEM: In this point the effect "flicker" of actualHeight to 0 on next line
	$('test').setStyle("height", 0);//Set height to 0
	new Fx.Style('test','height',{wait:false,duration: 3000,transition:Fx.Transitions.Bounce.easeOut}).start(0,actualHeight)
}

Bueno al menos funciona bien, pero si se podría mejorar lo del parpadeo.