Toggle Visibility When Hiding Elements

The development team at Medium have discussed some bad practices that break accessibility. In one example, they argue that opacity is not well supported by screen readers and so if we want to hide an element in a transition then we should always use the visibility attribute, too:

Some Related Posts:-

.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;

Remember opacity and visibility still leave an element in the document flow. If you need to remove it from flow, there is more work to do. In fact here’s a way to think about them…

See also  Strip HTML Tags Using JavaScript
can make thing invisible can make thing unclickable removes from doc flow can be transitioned can be reversed on child
opacity ya no no yes no
visibility ya ya no yes yes
display ya ya ya no no
pointer-events no ya no no no

If you need to change the display value of an element after a fading, that’s tougher. Not really possible in CSS since display isn’t transitionable. Snook has written about this, including some JavaScript to help.

See also  Animated Directional Arrows In CSS - Arrows.css

Leave a Reply

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