CSS 动画下拉菜单 & 动画后更改 z-index

Question

我正在使用 CSS 制作下拉菜单并使用 CSS transitions 淡入淡出并将菜单移动到显示中。通过更改 top 和 opacity 值可以正常工作，但问题是当菜单被隐藏时，它仍然在页面上的其他元素之上，因此无法与之交互，即使菜单不可见。

我对这个问题的解决方案是使用 z-index 将菜单放在其他所有内容的后面，当它不可见但我无法使用 transitions 时。当我使用下面的代码时，z-index 会按预期发生变化，菜单可以显示和隐藏，但它没有动画。

transition: top 0 .3s ease-in, opacity 0 .3s ease-in, z-index 0;

下面的代码可以很好地转换，但是 z-index 的变化发生在转换之前，因此您最终可以将 z-index 放在其他内容后面，然后在看不到它的地方发生转换。

transition: top 0 .3s ease-in, opacity 0 .3s ease-in;

Answer 1

我现在已经弄清楚我的问题是什么，我的速记值顺序错误并且 0 之后需要测量单位，所以在这种情况下它们应该是 0s。

这是应用于下拉列表的非悬停状态的工作代码，这在菜单转换到其隐藏状态时生效:

transition: top .3s ease-in 0s, .3s opacity ease-in 0s, 0s z-index ease-in .3s;

下面是应用于下拉菜单悬停状态的代码，它会在菜单转换到其可见状态时生效。

transition: top $default-animation-timing ease-in 0s, $default-animation-timing opacity ease-in 0s, 0s z-index ease-in 0s;

作为旁注，但与我遇到此问题的原因有关，在 MDN 上查找文档时，“初始值”列表是按字母顺序编写的，而不是按应添加值的顺序编写的。我假设它们按照应使用的顺序排列，这就是为什么我的值顺序错误。