我正在使用CSS＆amp ;;制作一个下拉菜单使用CSS transitions淡化＆amp;将菜单移动到显示中。通过改变top＆amp; opacity值，但问题是当菜单被隐藏时，它仍然在页面上的其他元素上，因此即使菜单不可见，它们也无法与之交互。
我对这个问题的解决方案是，如果菜单不可见，请使用z-index将菜单置于其他所有位置，但我无法使用transitions。当我使用下面的代码时，z-index按预期变化＆amp;菜单可以显示＆amp;隐藏但它没有动画。
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;
答案 0 :(得分：0)
我已经解决了我现在的问题，我的速记值是错误的。 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上的文档时，＆＃34;初始值＆＃34; list按字母顺序编写，而不是按值添加的顺序编写。我认为他们按照他们应该使用的顺序，这就是为什么我的价值订购错误。