CSS transition on visibility property

There are various occasions that I found I need to do this:

CSS


#el {
  transition: opacity 1s ease;
}

#el.fade-out {
  opacity: 0;
}

JavaScript


el.classList.add('fade-out');
el.addEventListener('transitionend', function afterFadeOut() {
  el.removeEventListener('transitionend', afterFadeOut);
  el.style.display = 'none';
});

but later I am being told that the same effect can be achieved with 0 line of JavaScript:


#el {
  transition: opacity 1s ease, visibility 1s ease;
}

#el.hide {
  opacity: 0;
  visibility: hidden;
}

Where visibility: hidden will be actually applied 1 sec later at the end of the CSS transition.

For a fade in effect (transition away from hidden), the element will be visible at the very start. Read the spec working draft for formal definition.

Leave a Reply

Your email address will not be published. Required fields are marked *