CSS transition fade element

I want to fade an element fr开发者_Go百科om visible to invisible.

I know I can do this using:

element {
  opacity:1;
}

element.fade {
  opacity:0;
  transition: opacity .5s linear;
}

The problem with this is that the (now) invisible element is still present, taking up space.

I'd like it to fade and then disappear completely, like if display:none was set.

You can hook the transitionEnd event and then when the fade finishes you can set display: none in that event handler. Or, you can use a different type of transition that ends with the element taking no space (such as transitioning the height to 0).

To hook the end of the transition, you'd use something like this:

// for webkit browsers
node.addEventListener('webkitTransitionEnd', function() {
        // set to display: none here
    }, false);

Use other prefixes with the transitionEnd event for other browsers.

Set a javascript timeout at 0.5s and then just add the extra css

var element = document.getElementsByClassName(fade)[0];
setTimeout(function() {        
    element.style.display="none"; 
}, 500);