19

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 when i click the toggle button the first time the transition occurs immediately.

However if i click the button again to close then the transition delays the amount of time of the transition before it executes.

What is causing the delay on close out and how can i get rid of it?

Thanks

3 Answers 3

44

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;
}
4
  • Awesome solution. Should have been the accepted answer.
    – MadOgre
    Mar 31, 2017 at 23:25
  • 2
    This should be the actual answer - perfect solution. While @Jay Rafferty's solution makes perfect sense, this is the technical solution.
    – ReSpawN
    Jun 19, 2017 at 12:09
  • Works perfect with chrome. Thanks!
    – Andres
    Jun 13, 2020 at 18:41
  • 3
    I've said it on the other (exact same) answer you provided: This answer needs an explanation. It's upvoted quite a bit, but it doesn't even work properly. The only effect I'm seeing, is that the retracting transition is only 0.5s vs the expanding transition that's 1s, and the function being used is basically an extreme ease-out. So basically, you're just contracting those 1000px of max height really quickly, and slowing down in the end, so the final bit looks somewhat like a regular ease-in-out. This is not a fix, this is a workaround, and I'd hardly call it a good one.
    – Timmiej93
    Sep 30, 2020 at 14:20
36

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

2
  • 8
    Great explanation of why the delay happens!
    – cloudberry
    Jan 18, 2017 at 8:11
  • The other answer gives a perfect solution where there was otherwise none, but this answer is still great as it explains the why which many of us still want to know.
    – Yes Barry
    May 24 at 0:42
1

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; }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.