隐藏元素时切换可见性

Medium的开发团队讨论了一些破坏可访问性的不良做法 。 在一个示例中，他们认为屏幕阅读器不能很好地支持opacity ，因此，如果我们想在过渡中隐藏元素，那么我们也应该始终使用“ visibility属性：

.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;
}

请参阅CodePen上 CSS-Tricks（ @ css-tricks ） 编写的Pen avNqoe 。

请记住，不透明度和可见性仍然是文档流程中的一个要素。 如果您需要将其从流程中删除，则还有更多工作要做。 实际上，这是一种思考它们的方法……

	会使东西看不见	会使事物无法点击	从文档流中删除	可以过渡	可以逆转孩子
不透明	ya	没有	没有	是	没有
能见度	ya	ya	没有	是	是
显示	ya	ya	ya	没有	没有
指针事件	没有	ya	没有	没有	没有

如果需要在淡入淡出之后更改元素的显示值，那就更难了。 由于显示不可转换，因此在CSS中实际上是不可能的。 Snook撰写了有关此内容的文章 ，其中包括一些JavaScript可以提供帮助。

翻译自: https://css-tricks.com/snippets/css/toggle-visibility-when-hiding-elements/