2ステップのCSSトランジションが機能しない

Question

メニューを左からスライドしてから縦方向にスライドさせ、それらのステップを逆にしてスライドさせて閉じ、次に左にスライドさせて閉じます。

私はこれにCSSトランジションを使用しようとしています。私はメニューを2段階の遷移で表示させることができますが、反転は機能しません。他の質問によると、手順を逆にすると効果がありますが、私の場合はそうではありません。ここで何が起きてるの？

のCss

.menu-slide { 
      position: absolute; 
      width: 220px; 
      top: 90px;     
      color: #fff; 
      background: rgba(0, 0, 0, 0.60); 
      overflow: hidden; 
} 
.open { 
      transition: left 1s, max-height 1.5s 1s; 
      left: 55px !important; 
      opacity: .80; 
      max-height: 600px !important; 
} 

.closed { 

      transition: max-height 1.5s, left 1s 1s;  
      left: -255px !important; 
      opacity: 0; 
      max-height: 20px !important; 
} 

Fiddle

Answer 1

問題は、あなたが.80に設定.closedにopacity: 0;を設定している：

.closed {   
    transition: max-height 1.5s, left 1s 1s;  
    left: -255px !important; 
    opacity: .80; 
    max-height: 20px !important; 
} 

Your fiddle updated.