CSS-Übergang funktioniert nicht mit transform: translate

Question

Wie kann ich einen reibungslosen Übergang für mein mobiles Menü realisieren?

Die transform Eigenschaft funktioniert, aber ich will es langsam ist .. passieren

My Sass sieht aus wie dieses

.mobile-nav 
    display: none 
    position: relative 
    width: 100% 
    background: $white 
    padding: 30px 0 20px 
    transform: translateY(-100%) 

    @media (max-width: 775px) 
    .mobile-nav.is-o 
     display: block 
     transform: translateY(0%) 

Answer 1

Das Haupthindernis Sie konfrontiert, dass die display Eigenschaft nicht animierbar ist .

Wie ein Lichtschalter ist aus und display: block ist eingeschaltet. Es gibt keinen Mittelweg, keine Fade-Effekte, keine CSS-Übergänge.

Es gibt jedoch mehrere andere Eigenschaften, die Sie für Übergänge verwenden können. Unter ihnen:

• height
• opacity
• z-index
• background-color

Hier ist ein Beispiel:

.mobile-nav-toggle { 
 
    font-size: 2em; 
 
    cursor: pointer; 
 
} 
 
.mobile-nav { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    width: 0; 
 
    height: 0; 
 
    opacity: 0; 
 
    transition: width 1s, height 1s, opacity 0s 1s, background-color 0s 2s; 
 
} 
 
.mobile-nav-toggle:hover + .mobile-nav { 
 
    width: 150px; 
 
    height: 150px; 
 
    opacity: 1; 
 
    background-color: lightgreen; 
 
    transition: 1s; 
 
}

<div class="mobile-nav-toggle">&#9776;</div> 
 
<div class="mobile-nav"> 
 
    <ul> 
 
    <li><a>Item</a></li> 
 
    <li><a>Item</a></li> 
 
    <li><a>Item</a></li> 
 
    </ul> 
 
</div>

Referenzen:

• Full list of animatable properties in CSS
• Transitions on the display: property

Answer 2

Ich persönlich benutze Opazität kombiniert mit Sichtbarkeit Fade-Effekt zu erzielen, wie ich für ganzes Element möchte. Denken Sie daran, Z-Index zu manipulieren, so dass Sie "verstecktes" Objekt nicht anklickbar sein wird, wenn es verschwindet.