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): /

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=".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>

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./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>

• javascript
• jquery
• html
• css
• css-animations

Share Improve this question Follow edited Feb 20, 2018 at 20:51 castletheperson 33.5k1111 gold badges7474 silver badges107107 bronze badges asked Feb 20, 2018 at 20:46 ultraloveninjaultraloveninja 2,13977 gold badges3434 silver badges6969 bronze badges 5

• 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 Commented Feb 20, 2018 at 20:55
• 1 Nevermind, I agree with @animake changing the max-height looks correct. – Phillip Thomas Commented Feb 20, 2018 at 21:00
• 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. – Seno Commented Feb 20, 2018 at 21:01
• I see you're using jQuery. Why not just use jQuery.animate()? – Ryan C Commented Feb 20, 2018 at 21:03
• You could use .slideToggle('slow') instead of toggleClass. – castletheperson Commented Feb 20, 2018 at 21:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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./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>