CSS可见性转换在Safari中不起作用

Posted 2023-03-06

【中文标题】CSS可见性转换在Safari中不起作用

【英文标题】：css visibility transition not working in safari

【发布时间】：2016-06-02 22:37:45

【问题描述】：

我有一个非常简单的导航栏——水平的，带有一层垂直的下拉菜单——我使用 CSS 实现了它。当鼠标离开下拉菜单时，我想添加一个短暂的延迟。环顾四周，可见性属性的 CSS 过渡似乎可以让我接近。这是相关的CSS：

.navigation ul ul

   display: block;
   visibility: hidden;
  -webkit-transition: visibility .75s, linear;
  -moz-transition: visibility .75s, linear;
  /* etc... */
   transition: visibility .75s, linear;


.navigation ul li:hover > ul

  visibility: visible;

这正是我在 Firefox (44.0.2)、Chrome (48.0.2564.116) 甚至 Opera (35.0.2066.68) 中的 OS X 上所需要的。事实上，我很惊讶 mouseover 没有延迟，但延迟是在 mouseoff 上应用的。正是我想要的。

在 Safari (9.0.3) 中，它就像不存在过渡属性一样 - 下拉菜单在鼠标关闭时立即消失。查看“检查元素”，我可以看到浏览器已经（正确地）为有问题的 ul 标记拾取了转换属性。

我是否遗漏了什么，其他浏览器是否只是允许？ Safari 是否动作不正确？这不是一个大问题，但如果可能的话，我想让它在任何地方都能正常工作。谢谢！

注意/编辑关于重复问题的可能性 (CSS transition with visibility not working)：就我而言，二进制可见性效果在我尝试过的所有情况下都可以正常工作，但 Safari 除外。另外，我已经弄清楚了，我将在下面发布...

【问题讨论】：

CSS transition with visibility not working的可能重复

【参考方案1】：

试试这个：

transition: visibility 0 linear .75s;

【讨论】：

opacity 在我的情况下不起作用，原因有两个：1）整个 ul 仍然“存在”，因此如果我将鼠标悬停在导航栏 下方 附近，下拉菜单弹出。我不想要那个。 2）我不是在寻找任何形式的淡入淡出 - 我实际上想要可见性属性的二进制性质。

【参考方案2】：

这是 Firefox 和 Chrome 将转换持续时间解释为可见性延迟的情况，而 Safari 则没有。

所以解决方法是正确设置延迟，而不是转换持续时间：

transition: visibility 0 linear .75s;

这适用于我尝试过的所有方法。我发现 Safari 在操作上仍然存在差异，因为它在 mouseover 和 mouseoff 时都有延迟，而其他仅在 mouseoff 时受到影响。

编辑：过早宣布胜利和更多细节......

Firefox 不喜欢没有单位的 '0'，所以修改为：

transition: visibility 0s linear .75s;

通过该更改，我在上面列出的所有浏览器中都看到了统一的行为，鼠标悬停和鼠标悬停都有相同的延迟。

另外请注意，在我上面的初始代码中，部分问题是那里有一个无关的逗号，改变了我想要的 CSS 中的内容，造成了更多的混乱（你能说我是这个 CSS3 的新手吗？东西了吗？）。

一些持续的测试还显示，如果我指定任何一个

transition: visibility .75s;

甚至更简单的

transition: .75s;

我得到了我最初想要的东西，即鼠标悬停时延迟为 0，鼠标悬停时延迟为 3/4 秒。为什么？ （抓头）我只是想知道这是否会在未来（或以前）版本的浏览器中发生变化。我猜是在狂野、狂野的西部地区进行交易的一部分。