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上查找文檔時，“初始值”列表是以字母順序而不是應按順序添加值的順序編寫的。 我認為它們的使用順序是正確的，這就是為什么我的價值訂購錯了。