0

Estou tentando fazer o seguinte, antes do elemento receber a resposta ajax eu seto o opacity dele pra 0 e disparo a transição, até ai esta funcionando beleza, a questão é que depois que eu passo o responseText pro elemento eu preciso exibir o elemento novamente e disparar a transição, mais não estou conseguindo fazer funcionar...

Eu ja consegui fazer isso com o .show e .hide do jquery mais queria fazer só ativando o css

document.getElementById( this.element ).addEventListener(
            "transitionend", 
            function(){
                document.getElementById( this.element ).innerHTML = this.xmlhttp.responseText;
                document.getElementById( this.element ).style.opacity = 1;
            }, true);
document.getElementById( this.element ).style.opacity = 0;

css do elemento

-webkit-transition: 200ms linear all;
-moz-transition: 200ms linear all;
transition: 200ms linear all;

// O problema esta com o this que esta retornando undefined, mas não sei como solucionar ;s

2
  • Mas você está usando o evento "transitionend", e não o callback do Ajax! Talvez o elemento esteja sendo exibido, só que sem conteúdo (innerHTML vazio). Experimente com innerHTML = '<b>Oi, Mundo!</b>' só para testar.
    – J. Bruni
    12/02/2014 às 17:34
  • ja testei ele não esta mudando o innerHTML
    – tissei
    12/02/2014 às 17:51

2 Respostas 2

1

O problema é que o this dentro da função event handler não corresponde mais ao this do contexto de execução fora dela. Experimente assim:

var self = this;
document.getElementById( self.element ).addEventListener(
            "transitionend", 
            function(){
                document.getElementById( self.element ).innerHTML = self.xmlhttp.responseText;
                document.getElementById( self.element ).style.opacity = 1;
            }, true);
document.getElementById( self.element ).style.opacity = 0;

Outra versão, melhorada:

var node = document.getElementById( this.element ),
    xhr  = this.xmlhttp;

node.addEventListener(
    "transitionend", 
    function() {
        if (node.style.opacity != 0) return;
        node.innerHTML = xhr.responseText;
        node.style.opacity = 1;
    }, true);
);

node.style.opacity = 0;
10
  • Então se eu faço só : opacity:0 elemento=response e opacity:1 funciona normal mais se coloco dentro do event listener ele não executa, se eu jogo só um alert vai mais se coloco o codigo não funciona
    – tissei
    12/02/2014 às 17:45
  • Tentou com setTimeout? Coloque console.log para verificar se self.xmlhttp.responseText contém mesmo alguma coisa e se self.element está realmente apontando para o elemento certo.
    – J. Bruni
    12/02/2014 às 17:48
  • já testei com o setTimeout, ele ta dando esse erro no console tanto pra quando eu uso this quanto pra self -> Cannot read property 'responseText' of undefined
    – tissei
    12/02/2014 às 18:01
  • é realmente essa questão do this e do self pq se eu jogo direto la o nome do elemento ele funciona ;s
    – tissei
    12/02/2014 às 18:07
  • Experimente o novo código, onde definimos a variável self no lugar correto (veja a resposta alterada). Talvez assim nem seja necessário o setTimeout.
    – J. Bruni
    12/02/2014 às 18:13
0

Acho que com fadeIn() e fadeOut() ou talvez também com animate() pode te ajudar.

1
  • 1
    então brother como eu falei ali em cima eu ja consegui fazer isso com jquery, queria fazer sem, deixar possivel só ativar as transitions
    – tissei
    12/02/2014 às 17:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .