CSS动画下拉菜单并在动画后更改z-index答案

【问题标题】：CSS to animate dropdown menu & change z-index after animationCSS动画下拉菜单并在动画后更改z-index
【发布时间】：2017-03-24 15:51:01
【问题描述】：

我正在使用 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;

【问题讨论】：

您需要将菜单的显示属性设置为display: none;。可见性或不透明度使项目“看到”，但它仍然存在于 DOM 中。 Display: none 将其从 DOM 中移除。虽然我不确定这在转换中会如何工作，但如果您发布了所有相关代码，我们可以尝试一下。
你写的是 0 .3s 而不是 0.3s
很可能您正在寻找transition-delay 属性，但您应该在帖子本身中包含所有相关代码，以便我们能够提供正确的答案。
@sn3ll display: none 不起作用，因为据我所知它不能与转换一起使用，所以它可以解决我目前的问题，但会创建另一个（菜单将不再褪色） .
无论如何，您应该发布一个可验证的示例（sn-p）

【解决方案1】：

我已经解决了我现在的问题，我的速记值顺序错误，0s 后面需要测量单位，所以在这种情况下，它们应该是 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 上查找文档时，“初始值”列表是按字母顺序编写的，而不是按添加值的顺序。我认为它们是按照它们应该使用的顺序排列的，这就是为什么我的值排序错误。

【讨论】：