html - 两步 CSS 过渡反向不起作用

Question

我想要一个从左侧滑入然后垂直滑动打开的菜单，然后通过反转这些步骤关闭，滑动关闭然后向左滑动。

我正尝试为此使用 css 转换。我可以让菜单出现两步过渡，但反转不起作用。根据其他问题，颠倒步骤应该可行，但对于我的具体情况，它不起作用。这里发生了什么？

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

问题是您在 .closed 上设置了 opacity: 0;，将其设置为 .80:

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

Your fiddle updated.