Two step CSS transition reverse does not work

Question

I would like to have a menu that slides in from the left and then vertically slides open, and closes by reversing those steps, sliding closed and then sliding away to the left.

I'm trying to use css transitions for this. I can get the menu to appear with a two step transition, but reversing doesn't work. According to other questions, reversing the steps should work, but for my specific case it does not. What is happening here?

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

Troyer · Accepted Answer · 2017-03-06 15:55:51Z

1

The problem is you have set opacity: 0; on .closed set it to .80:

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

Your fiddle updated.

answered Mar 6, 2017 at 15:55

Troyer

7,0914 gold badges37 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NetHawk Over a year ago

Thank you! I was going to add opacity to the transition, that's why it was even there.

Collectives™ on Stack Overflow

Two step CSS transition reverse does not work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related