CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-animations
ultraloveninja
ultraloveninja

Reputation: 2139

Smooth CSS slide down animation

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>

Upvotes: 2

Views: 15235

Answers (1)

animake
animake

Reputation: 309

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>

Upvotes: 3

Related Questions