Vueでtransitionがうまくいかないとき

動的にサイズを取得してtransitionしてアコーディオンを作っているのにうまくいかない人へ書きます。

いきなり結言

以下のようにコードを書いていてカクカクするときは、transitionの直下にpaddingやmarginを指定しているか確認しましょう。heightについてtransitionしている場合は、paddingやmarginを0でない値に指定しているとうまくいきません。
というのも、ele.style.height等はpadding等の大きさを含んでないから。じゃないかなと思っていますけど、ちゃんと考えるのめんどくさいので放置しています。
padding等をつけたいときは、transitionに直下に要素を作ってアコーディオンを囲んでしまいましょう。

<transition name="accordion" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave">
アコーディオンのなかみ
</transition>

methods: {
    beforeEnter(el) {
      el.style.height = '0'
    },
    enter(el) {
      el.style.height = el.scrollHeight + 'px'
    },
    beforeLeave(el) {
      el.style.height = el.scrollHeight + 'px'
    },
    leave(el) {
      el.style.height = '0'
    }
}