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

我希望有一个菜单，该菜单从左侧滑入，然后垂直滑开，然后通过反转这些步骤，滑到关闭然后滑到左侧来关闭。

我正在尝试为此使用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

最佳答案

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

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

Your fiddle updated.

关于html - 两步CSS过渡反向不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42629833/