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

问题是您已在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.

两步CSS过渡反转不起作用

1 个答案: