Der Übergang funktioniert nicht auf der Hintergrund-Deckkraft, wenn die Klasse entfernt wird.

Question

Ich habe einen Hintergrund auf meiner Website, der sich öffnet, wenn es erforderlich ist. Modale, Mobile Nav usw.

Ich möchte die Deckkraft des Hintergrunds zu verblassen, aber ich kann es nicht richtig Übergang erhalten, wenn die --open Klasse aus dem Hintergrund entfernt wird.

Ich habe ein paar Iterationen durchlaufen, also irgendwelche Ideen, wie es funktioniert UND besser css wird geschätzt.

Hier ist eine Demo, die den Leichtigkeitseffekt demonstriert, der auftritt, wenn --open auf den Hintergrund angewendet wird, aber nicht funktioniert, wenn es entfernt wird.

https://jsfiddle.net/p2yz0rvr/

Für Futures willen hier ist der Code:

.backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -9999999999; 
    opacity: 0; 
    text-align: center; 

    transition: opacity 0.3s ease-in; 

} 

.backdrop--open { 
    opacity: 0.75; 
    z-index: 2; 
    background: #000; 

    transition: opacity 0.4s ease-out; 
} 

Answer 1

Das Problem ist, dass Sie keinen Hintergrund auf dem anfänglichen .backdrop Zustand gesetzt verfügen, der Hintergrund auf dem Element .backdrop--open gesetzt.

Da Sie nur die opacity-Eigenschaft übergehen, tritt der Übergang nicht auf, wenn Sie die Klasse .backdrop--open entfernen. Daher müssten Sie den Hintergrund in den ursprünglichen Zustand .backdrop verschieben, damit der Übergang beim Entfernen der Klasse stattfindet.

Updated Example

.backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: -1; 
    opacity: 0; 
    text-align: center; 
    background: #000; 
    transition: opacity 0.3s ease-in; 
} 

.backdrop--open { 
    opacity: 0.75; 
    z-index: 2; 
    transition: opacity 0.4s ease-out; 
} 

---

Als Alternative können Sie auch Ihren ursprünglichen Code halten und über nur die background Eigenschaft neben der opacity Eigenschaft (ohne ändern zu müssen, wo der Hintergrund eingestellt ist).

Beachten Sie, dass die z-index-Eigenschaft geändert werden kann. Je nachdem, was Sie erreichen möchten, möchten Sie möglicherweise nur diese beiden Eigenschaften auswählen, anstatt all zu verwenden.

Updated Example

.backdrop { 
    /* ... */ 
    transition: background 0.3s ease-in, opacity 0.3s ease-in; 
} 

.backdrop--open { 
    /* ... */ 
    background: #000; 
    transition: background 0.4s ease-out, opacity 0.4s ease-out; 
}