CSS3過渡工作的一種方式，但不是其他

Question

我有一個<div>是conditionaly有以下兩種類型之一 -

ng-class="{'visible': sidebarShown, 'hidden': !sidebarShown}" 

最初班上總是會hidden，當visible替換類width， left和opacity屬性都使用CSS3轉換動畫。

但是，當hidden類重新編號爲visible時，動畫不會反轉，並且立即將所有三個屬性的新值切換爲即時。

我試着加入transition屬性的樣式兩種.visible和.hidden，以及每個獨立，但在所有情況下，只有visible動畫作品。

我在這裏做錯了什麼？

---

有關HTML

<div id="modal" data-ng-if="isMobile" 
       data-ng-class="{'visible': sidebarShown, 'hidden': !sidebarShown}"> 
</div> 

---

CSS爲#modal.hidden和#madal.visible

.mobile #modal{ 
    position: absolute; 
} 
.mobile #modal.hidden{ 
    left:  0; 
    opacity: 0; 
    width:  100%; 
} 
.mobile #modal.visible{ 
    background-color: #000000; 
    height:    100%; 
    left:    271px; 
    opacity:   0.8; 
    right:    0; 
    width:    calc(100% - 271px); 
    z-index:   99; 
    -webkit-transition: all 0.5s ease-in-out; 
    transition:   all 0.5s ease-in-out; 
} 

---

進一步試圖

我現在發現最初缺少height是問題。下面的代碼仍然只有一種方式。

我需要什麼 -

.mobile #modal.hidden { height: 0; } 
.mobile #modal.visible { height: 100%; } 

當從過渡到.hidden的.visible的height應該vaule立即改變。然而，height應該在延遲0.5s之後轉換，以允許其他動畫完成。我已經提出了下面的代碼，但它仍然不是那裏。

.mobile #modal{ 
    left:    0; 
    opacity:   0; 
    position:   absolute; 
    width:    100%; 
    -webkit-transition: left 0.5s ease-in-out, 
         opacity 0.5s ease-in-out, 
         width 0.5s ease-in-out; 
    transition:   left 0.5s ease-in-out, 
         opacity 0.5s ease-in-out, 
         width 0.5s ease-in-out; 
} 
.mobile #modal.hidden{ 
    height:    0; 
    -webkit-transition: height 0 ease-in-out 0.5s; 
    transition:   height 0 ease-in-out 0.5s; 
} 
.mobile #modal.visible{ 
    background-color: #000000; 
    height:    100%; 
    left:    271px; 
    opacity:   0.8; 
    right:    0; 
    width:    calc(100% - 271px); 
    z-index:   99; 
} 

Answer 1

通過張貼@MaximillianLaumeister評論我確定，問題是沒有初始高度值定義爲指導。

然後，我試着轉換這個值，但最終解決方案是通過設置z-index: -1;來簡單地「隱藏」#modal。

隨着轉換從99到-1（以0.5s爲單位），.mobile #modal在整個轉換過程中基本可見，在結束之前僅在0.005秒左右消失在其他內容之後）。

.mobile #modal{ 
    height:    100%; 
    left:    0; 
    opacity:   0; 
    position:   absolute; 
    width:    100%; 
    -webkit-transition: all 0.5s ease-in-out; 
    transition:   all 0.5s ease-in-out; 
    z-index:   -1; 
} 
.mobile #modal.visible{ 
    background-color: #000000; 
    height:    100%; 
    left:    271px; 
    opacity:   0.8; 
    right:    0; 
    width:    calc(100% - 271px); 
    z-index:   99; 
}