CSS animieren Dropdown-Menü & ändern Z-Index nach Animation

Question

Ich mache ein Dropdown-Menü mit CSS & mit CSS transitions zu verblassen & verschieben Sie das Menü in die Anzeige. Dies funktioniert gut, indem die top & opacity Werte ändern, aber das Problem ist, wenn das Menü ausgeblendet ist, ist es immer noch über andere Elemente auf der Seite, so dass sie nicht interagiert werden, obwohl das Menü nicht sichtbar ist.

Meine Lösung für dieses Problem ist, dass z-index verwenden, um das Menü hinter allem anderen zu platzieren, wenn es nicht sichtbar ist, aber ich kann es nicht mit der transitions arbeiten. Wenn ich den Code unten verwende, ändert sich der Z-Index wie erwartet & das Menü kann & ausgeblendet werden, aber es wird nicht animiert.

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

Der folgende Code hier Übergänge in Ordnung, aber die z-Indexänderung geschieht vor den Übergängen, so dass Sie mit dem Z-Index am Ende können das Menü hinter anderen Inhalten setzt dann geschehen dann übergehen, wo sie nicht gesehen werden können.

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

Answer 1

ich gearbeitet habe, was nun mein Problem ist, ich hatte die Stenografie Wert in der falschen Reihenfolge & die 0 s die Maßeinheit nach erfordern, so ist es dieser Fall sie 0s hätte sein sollen.

Hier ist der Arbeits Code bis auf den nicht-Hover-Zustand für den Tropfen angewendet, nimmt diese beeinflussen, wenn das Menü zu seinen verborgenen Zustand übergeht:

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

den Code Schwebezustand des angelegten Ist hier Dropdown-Menü, das aktiviert wird, wenn das Menü in den sichtbaren Status wechselt.

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

Als Randbemerkung, aber in Bezug auf, warum ich dieses Problem hatte, als Dokumentation auf MDN Nachschlagen der „Anfangswert“ Liste in alphabetischer Reihenfolge geschrieben wird, werden die Werte nicht in der Reihenfolge hinzugefügt. Ich nahm an, dass sie in der Reihenfolge waren, in der sie benutzt werden sollten, weshalb ich meinen Wert falsch geordnet hatte.