Firing CSS Transition when performing ajax request

Question

I’m trying to do the following, before the element gets the answer ajax opacity from it to 0 and trigger the transition, until then this working beauty, the question is that after I pass the responseText for the element I need to display the element again and trigger the transition, but I’m not able to make it work...

I’ve already done it with the .show and .hide jquery’s most 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;

css of the element

-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 do not know how to solve s;

Answer 1

The problem is that the this within the function Event Handler no longer corresponds to this of the execution context outside it. Try it like 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 version, improved:

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;

Answer 2

I think with fadein() and fadeOut() or maybe also with Animate() can help you.