Smooth CSS slide down animation

Question

I'm tryin to get a smooth slide down animation by adding a class to a div with an click event.

It kinda "jumps" really fast right when the animation starts and then evens out, but it look really janky and I'm not sure why.

It's currently using the max-height method to add a height to the div to "open" and then when it's clicked again, it toggles a class which has max-height:0.

Seems fine if you have a bunch of elements in the hidden div that is supposed to slide down, but if you only have one or two the slide down animation is pretty jumpy. Wondering if I need to use transform:translateY instead or not?

Here's a link to an example (Codepen): https://codepen.io/ultraloveninja/pen/ZrxNrj/

var premiumOptions = $(".package-header");
$(premiumOptions).click(handleClick);

function handleClick() {
  console.log("clicked");
  var description = $(this)
    .parent()
    .find(".description");
  if ($(description).length) {
    $(description).toggleClass("open closed");
  }
}

body {
  padding: 20px;
}

.package-item {
  background: #ccc;
  padding: 10px;
}

.closed {
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  transition: all 0.5s ease;
  will-change: transform;
}

.open {
  max-height: 1000px;
  overflow: hidden;
  transition: all 0.5s ease;
  will-change: transform;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="package-item line">
  <div class="flex-row package-header">
    <h3>Click This</h3>
  </div>
  <ul class="description closed">
    <li>This is the thing that needs to show smoothly</li>
    <li>This is the thing that needs to show smoothly</li>
  </ul>
</div>

Solution

Your max-height: 1000px; is causing an issue with the transition, I tried low values, It looked smooth. Try considering the max-height value in the .open css.

var premiumOptions = $(".package-header");
$(premiumOptions).click(handleClick);

function handleClick() {
  console.log("clicked");
  var description = $(this)
    .parent()
    .find(".description");
  if ($(description).length) {
    $(description).toggleClass("open closed");
  }
}

body {
  padding: 20px;
}

.package-item {
  background: #ccc;
  padding: 10px;
}

.closed {
  overflow: hidden;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  transition: all 0.5s ease;
  will-change: transform;
}

.open {
  max-height: 50px;
  overflow: hidden;
  transition: all 0.5s ease;
  will-change: transform;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="package-item line">
  <div class="flex-row package-header">
    <h3>Click This</h3>
  </div>
  <ul class="description closed">
    <li>This is the thing that needs to show smoothly</li>
    <li>This is the thing that needs to show smoothly</li>
  </ul>
</div>

Comments

[Phillip Thomas]

It appears to have everything to do with removing the padding in .closed, if you don't remove the padding it is seamless. Seems the animation and padding remove fire at different times. I am unsure how to fix this though.

[Phillip Thomas]

Nevermind, I agree with @animake changing the max-height looks correct.

[Seno]

I think your animation were too fast for the .description because the height of it were too small. Try lowering the animation to 1s and apply it to .description transition: all 1s ease-in-out;. You don't need to apply the animation to .closed and .open but you need to apply the animation to the element that will have transition, which is in this case is .description.

[Ryan C]

I see you're using jQuery. Why not just use jQuery.animate()?

[4castle]

You could use .slideToggle('slow') instead of toggleClass.

[ultraloveninja]

Hmm, yeah moving the transition into the description class and then lowering the max height seems to iron that out a bit. I might even go as far to get the height of the description and then pass that in as the max-height with a click event to future proof any additional content.