Triggering CSS transition when performing ajax request

0

I'm trying to do the following, before the element receives the ajax answer I hedge the opacity of it to 0 and trigger the transition, until there it is working beauty, the thing is that after I pass responseText pro element I need to display the element again and trigger the transition, but I'm not getting it to work ...

I've already been able to do this with .show and .hide of jquery else I wanted to do just by activating 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;

element css

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

// The problem is with the this that is returning undefined, but I do not know how to solve it; s

    
asked by anonymous 12.02.2014 / 18:32

2 answers

1

The problem is that the this within the event handler function no longer corresponds to the this of the execution context outside of it. Try this:

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;

Another improved version:

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;
    
12.02.2014 / 18:40
0

I think that with fadeIn () and fadeOut () or maybe also with animate () might help you.

    
12.02.2014 / 18:34