Publicado em 8 de out.

[Resolvido] animação height

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();
 }
 });

 }

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Vadio· 9 de out.

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· 9 de out.

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· 10 de out.

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();

 }
 });
 });