title: Smooth CSS slide down animation
body: <p>I'm tryin to get a smooth slide down animation by adding a class to a div with an click event.</p>
  
  <p>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.</p>
  
  <p>It's currently using the <code>max-height</code> method to add a height to the div to "open" and then when it's clicked again, it toggles a class which has <code>max-height:0</code>.</p>
  
  <p>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 <code>transform:translateY</code> instead or not?</p>
  
  <p>Here's a link to an example (Codepen):
  <a href="https://codepen.io/ultraloveninja/pen/ZrxNrj/" rel="nofollow noreferrer">https://codepen.io/ultraloveninja/pen/ZrxNrj/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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");
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="package-item line"&gt;
    &lt;div class="flex-row package-header"&gt;
      &lt;h3&gt;Click This&lt;/h3&gt;
    &lt;/div&gt;
    &lt;ul class="description closed"&gt;
      &lt;li&gt;This is the thing that needs to show smoothly&lt;/li&gt;
      &lt;li&gt;This is the thing that needs to show smoothly&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>