CODEWITHSUNDEEP
htmlcss
NetHawk
NetHawk

Reputation: 1412

Two step CSS transition reverse does not work

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

Upvotes: 1

Views: 328

Answers (1)

Troyer
Troyer

Reputation: 7013

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.

Upvotes: 1

Related Questions