[Resolvido] animação height

[Vadio 13]

olá pessoal

 

to começando a criar um script de um possível projeto pessoal meu..

 

oque eu quero é que quando a pessoa clique num link o mesmo faça a busca pro ajax do conteúdo e faça a interpolação de altura da div

 

por exemplo: http://tilljoey.webuda.com/template.html

 

esse é oq eu to fzd mas como v6 podem ver ao clicar em sobre nos e depois em home ele chama a pag mas ao inserir o novo conteúdo de content o height assume a propriedade do conteúdo q foi adicionado.. até ae tudo bem mas ele faz isso mto "chapado" gostaria de suavizar esse efeito pra que ele assuma a altura com uma animação e não diretão como está acontecendo...

 

 

desde já obrigado

 

code responável pelo ajax

var standby = new StandBy({
			color: '#000'	
		});
		document.body.appendChild(standby.domNode);
		standby.startup();

		function Ajax(e, id, label){
			standby.set('target','page');
			standby.show();
			var contentLabel = dom.byId('content_label');
			contentLabel.innerHTML = label;

			var request = xhr.get({
				url: id+".html",
				load:function(data){
					var content = dom.byId('content');
					content.innerHTML = data;
				},
				error:function(err){
					console.debug(err);
				},
				handle:function(e){
					standby.hide();
				}
			});

		}

[Vadio 13]

criei a função q faz a animação mas infelizmente não to conseguindo fazer ela funcionar com o %

 

ela só anima se "units"="px/outros"

           function content(){
               this.show = function(){
                   baseFx.animateProperty({
                       node: "content",
                       properties: {
                           height:{
                               start: 0.0,
                               end: 100.0,
                               units: "%"
                           }
                       },
                       easing: easing.linear,
                       duration: 900
                   }).play();
               }
               this.hide = function(){
                   baseFx.animateProperty({
                       node: "content",
                       properties: {
                           height:{
                               start: 100.0,
                               end: 0.0,
                               units: "%"
                           }
                       },
                       easing: easing.linear,
                       duration: 900
                   }).play();
               }
           }

[Vadio 13]

consegui...

obrigado aos q leram o tópico..

           function content(){
               this.show = function(){
                   baseFx.animateProperty({
                       node: "content",
                       properties: {
                           height:{
                               start: 0.0,
                               end: function(node){
                                   return domGeom.position(node).h;
                               }
                           }
                       },

                       easing: easing.linear,
                       duration: 200
                   }).play();
               }
               this.hide = function(urlId){
                   var anim = baseFx.animateProperty({
                       node: "content",
                       properties: {
                           height:{
                               start: function(node){
                                   return domGeom.position(node).h;
                               },
                               end: 0.0
                           }
                       },
                       onEnd:function(e){
                           window.location = window.location.origin + window.location.pathname+"?q=" + urlId ;
                       },
                       easing: easing.linear,
                       duration: 200
                   });
                   anim.play();
               }
           }

[Vadio 13]

para usar essa animação com o router do dojo eu tive problemas

 

vo posta aqui meu resultado final...

 

 

function anim(){
                   this.show = function(){
                       baseFx.animateProperty({
                           node: "content",
                           properties: {
                               height:{
                                   start: 0.0,
                                   end: function(node){
                                       return domGeom.position(node).h;
                                   }
                               }
                           },
                           onEnd: function(e){
                               var content = dom.byId('content');
                               content.setAttribute('style','height:100%');
                           },

                           easing: easing.linear,
                           duration: 200
                       }).play();
                   }
                   this.hide = function(){
                       var anim = baseFx.animateProperty({
                           node: "content",
                           properties: {
                               height:{
                                   start: function(node){
                                       return domGeom.position(node).h;
                                   },
                                   end: 0.0
                               }
                           },
                           onEnd: function(e){
                               var content = dom.byId('content');
                               content.innerHTML = '';
                               content.setAttribute('style','height:100%');
                           },
                           easing: easing.linear,
                           duration: 200
                       });
                       anim.play();
                   }
               }

 

var animacao = new anim();
               router.register("/album", function(evt){
                   standby.show();
                   animacao.hide();
                   //anim.hide(domGeom.position(content).h);
                   /**
                    *
                    * @type {*}
                    */
                   var request = xhr.get({
                       url: getLocalUrl()+"album",
                       handleAs: 'json',
                       load:function(data){

                           content.innerHTML = '';

                           var ul = domConstruct.create('ul',null,content);
                           array.forEach(data,function(item){
                               var li = domConstruct.create('li',null,ul);
                               var title = domConstruct.create('div',null,li);
                               title.innerHTML = item.nome;
                           });
                       },
                       error:function(err){
                       },
                       handle:function(e){
                           standby.hide();
                           animacao.show();

                       }
                   });
               });