How to Remove Delay on Css3 Slide out transition which uses max-height transition

Question

I\'m having an issue with a transition I\'m using to slide a panel in and out.

Please take a look at the following jsbin http://jsbin.com/uvejuj/1/

Notice that

Answer 1

Fixed JS Bin

Fix delay solution:

Put cubic-bezier(0, 1, 0, 1) transition function for element.

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}

Answer 2

I fixed it in my case by using normal transition for opening (from max-height 0px to max-height 500px) BUT by using an animation when closing, starting from max-height 50vh.

This way the delay is not from shrinking from 5000px to the actual height of your content. The only delay that can appear now is if your content is less than 50% of your screen height, but that works buttersmooth in my cases.

Here's my magic (scss format):

.slide-open{
  max-height: 0;
  overflow: hidden;
  &:not(.open){
    animation-name: shrink;
    animation-duration: .3s;
  }
  &.open{
    max-height: 5000px;
    transition: max-height .9s ease-in-out;
  }
}

@keyframes shrink {
  0% { max-height: 50vh; }
  100% { max-height: 0; }
}

Answer 3

It's because you're animating between 0 and 1000px max height but your content is only about 120px high. The delay is the animation happening on the 880 pixels that you can't see.

Either set max-height to the known height of your content (if you know it - example: http://jsbin.com/onihik/1/) or try a different method. Maybe something like https://stackoverflow.com/a/6486082/2619379