CODEWITHSUNDEEP
csscss-transitions
Pablo Fernandez
Pablo Fernandez

Reputation: 105220

CSS transition fade element

I want to fade an element from 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.

Upvotes: 2

Views: 6475

Answers (2)

jfriend00
jfriend00

Reputation: 707328

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.

Upvotes: 1

cmplieger
cmplieger

Reputation: 7351

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);

Upvotes: 1

Related Questions