當類被刪除時不能將背景不透明度轉換爲0

Question

我的網站上有一個隨時可以打開的背景。手機導航等。

我想獲得背景的不透明度以淡入淡出，但是當從背景中刪除--open類時，我無法使其正常轉換。

我已經經歷了幾次迭代，所以有關如何使其工作和更好的CSS的任何想法，讚賞。

下面是一個演示，演示當--open應用於背景時發生的易用效果，但在刪除時不起作用。

https://jsfiddle.net/p2yz0rvr/

對於期貨的緣故，這裏的代碼：

.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

的問題是，你沒有背景對初始.backdrop狀態設置，背景是件.backdrop--open上設置。

由於您只轉換opacity屬性，因此刪除.backdrop--open類時不會發生轉換。因此，您需要將背景移至最初的.backdrop狀態，以便在刪除課程時進行轉換。

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; 
} 

---

作爲替代方案，你也可以讓你的初始代碼，只是過渡，除了opacity屬性background性能（無需更改了背景設置）。

記住了z-index屬性可以轉移，所以這取決於你想要達到你可能只想針對這兩個屬性，而不是使用all什麼。

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; 
}