CSS transition on visibility property

This content is over 10 years old. It may be obsolete and may not reflect the current opinion of the author.


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.