Triggering CSS transition when performing ajax request

Question

Triggering CSS transition when performing ajax request

Navigation

#1 by (1 votes)
#2 by (0 votes)

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

javascript css ajax

asked by anonymous 12.02.2014 / 18:32

2 answers

0

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

12.02.2014 / 18:34

How to save the results of a "drag-and-drop" table? How to loop openMp to count rows in a text file?

score 1 · Accepted Answer

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;