隐藏元素时的可见性切换 | CSS-Tricks

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

请记住，opacity 和 visibility 仍然将元素保留在文档流中。如果您需要将其从流中移除，还需要做更多工作。实际上，这里有一个思考它们的方式……

	可以使东西不可见	可以使东西不可点击	从文档流中移除	可以进行过渡	可以在子元素上反转
opacity	是的	否	否	是的	否
visibility	是的	是的	否	是的	是的
display	是的	是的	是的	否	否
pointer-events	否	是的	否	否	否

如果您需要在淡出后更改元素的 display 值，那就更难了。在 CSS 中实际上是不可能的，因为 display 不可过渡。 Snook 已经对此进行了描述，包括一些 JavaScript 来帮助实现。

Nico

# 2015 年 9 月 18 日

我的无障碍轮播图也有同样的问题 http://a11y.nicolas-hoffmann.net/carrousel/：我必须检测过渡结束的时间，才能在“隐藏”内容上添加类。

有时这真的很让人头疼 :-/

Johan

# 2015 年 9 月 18 日

这不仅仅是为了屏幕阅读器，也是为了键盘焦点导航。
该表格中应该再添加一列

可以使东西不可聚焦

opacity
否

visibility
是的

display
是的

pointer-events
否

Johan

# 2015 年 9 月 18 日

(降价表格失败，这里是一个代码块)

  |-----------------|----------------------------|
  |                 | can make thing unfocusable |
  |-----------------|----------------------------|
  | opacity         | no                         |
  |-----------------|----------------------------|
  | visibility      | ya                         |
  |-----------------|----------------------------|
  | display         | ya                         |
  |-----------------|----------------------------|
  | pointer-events  | no                         |
  |-----------------|----------------------------|

Spicy Magpie

# 2015 年 9 月 21 日

虽然超出了隐藏元素的范围，但我发现了一个（诚实的）错误

实际上，如果目标浏览器支持 background-blend-mode、mix-blend-mode 和 isolation CSS 属性，那么 opacity 可以被子元素禁用。

不过，这些属性的支持非常有限；旧版浏览器将无法使用。

Eno

# 2016 年 7 月 27 日

我有点晚了，但在表格中应该说明 visibility 不可过渡，因为元素只能完全可见或不可见（没有“半可见”元素）。我们唯一能做的是使用 transition-delay，这与直接过渡 visibility 不完全相同。

Merbin Joe

# 2016 年 8 月 26 日

不错的帖子，尝试添加下一个后退按钮，以便移动到下一个帖子。这里很难找到你的帖子。

Timo

# 2019 年 8 月 13 日

看起来你不再需要 transition-delay 来正确淡入淡出 - 查看链接以获取演示（在 Chrome 和 Firefox 中测试） - 有人对此有信息吗？

Nico

# 2019 年 8 月 13 日

是的，我经常使用一个技巧：visibility 可以被延迟，以便在过渡结束时应用。

/* This is the opened state */
.animated-expandmore__to_expand {
 display: block;
 overflow: hidden;
 opacity: 1;
 transition: visibility 0s ease, max-height 2s ease, opacity 2s ease ;
 max-height: 80em;
 /* magic number for max-height = enough height */
 visibility: visible;
 transition-delay: 0s;
}
/* This is the hidden state */
[data-hidden=true].animated-expandmore__to_expand {
 display: block;
 max-height: 0;
 opacity: 0;
 visibility: hidden;
 transition-delay: 2s, 0s, 0s;
}

示例在此： https://van11y.net/accessible-hide-show/

所以基本上，内容将在过渡结束时被 visibility: hidden “隐藏”。

Leho Kraav

# 2021 年 3 月 11 日

不幸的是，PageSpeed Insights 将 visibility 标记为不可组合的 https://github.com/GoogleChrome/lighthouse/issues/11658

某人

# 2022 年 8 月 5 日

虽然它不支持 ie8 及更早版本，
pointer-events: none;，我认为可以使用，或者使用 z-index: -1

顺便说一句，这个网站上的代码片段无法正常工作。

评论

发表评论 取消回复

发表评论取消回复