jQueryのslideDownがカクカクするので、別の方法を探してます！

Question

もう下記コードのままなんですけど、#wrapperを「にゅーん」とスライドさせながら表示したいんですが、どうやったら上手にできますか？

jQueyrのslideDownだとカクカクするからイヤなんですよね…

次のように考えて、CSSでtransition: 0.5s; としたのですが、これだと「にゅーん」が表現できませんでした。

どうやったら、カクカクしない「にゅーん」が作れますでしょうか？

動くサンプル：https://jsfiddle.net/36u20qzx/

<p>クリックしたら#wrapperを「にゅーん」とスライドさせながら表示したい。<br>
ただしjQueryのslideDownはカクカクするからイヤなんです。</p>

<div id="header">クリック</div>

<div id="wrapper" class="close">
  <ul>
    <li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li>
  </ul>
</div>

#header {
    background: #eee;
    border: 1px solid #000;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
}
#wrapper {
    background: thistle;
    transition: 0.5s;    
}
#wrapper.close {
    height: 0;
}
#wrapper.open {
    height: auto;
}

$(function(){
  $(document).on("click","#header:not(.click)",function(){
    $(this).addClass('click');
    $('#wrapper').removeClass('close').addClass('open');
  });
  $(document).on("click","#header.click",function(){
    $(this).removeClass('click');
    $('#wrapper').removeClass('open').addClass('close')
  });
});

Comments

[yambejp]

カクつくというsampleのソースをアップしてください
jQueryのバージョンと使っていればライブラリ、
検証しているOS、ブラウザの種類、バージョンを付記してください

Answer 1

slideDownがカクカクするなんて！？
slideDown愛好家（ウソ）として見過ごす訳にはいかなったので、
あえてslideDownで！

→ JSFiddle

Answer 2

Verocity.jsというライブラリがjQueryと互換性があって便利です。
公式サイトは英語ですが、日本語でも情報がたくさんあるので、「Vecocity.js スライドダウン」などで調べてみてください。

滑らかなアニメーションの他に、jQueryではアニメーションさせることのできない transform などのCSSもアニメーションさせることができるなど、便利な機能があります。

補足
jQueryのアニメーションは、画面の更新間隔に合わせずにアニメーションするので「カクツキ」（または「コマ落ち」）が発生します。
Velocity.jsでは、画面の更新間隔に合わせてアニメーションすることで、滑らかな動きを実現しています。
詳しくはrequestAnimationFrameなどの単語で調べてみてください。