Vueのtransitionでbootstrapのgridサイズ変更をヌルヌルと

Question

表題の件を実現したいです。

たとえば、

<div class="gridA" :class="{'col-lg-3': toggle, 'col-lg-6': !toggle}">
</div>
<div class="gridB" :class="{'col-lg-9': toggle, 'col-lg-6': !toggle}">
</div>

というような作りで、toggleがtrue/falseと切り替わるタイミングで、
gridAとgridBのサイズを変更させます。

通常であれば即座にアニメーションもなく切り替わるのですが、
vueのtransitionを用いて、ぬるぬるとアニメーションして切り替わるようにしたいです。

ご助言頂けますとうれしいです！

Answer 1

Vue ドキュメントの状態のトランジション を見ると，

Vue のトランジションシステムは entering、leaving、およびリストをアニメーションさせるための多くの単純な方法を提供します

とありますので，Vue はコンポーネントの表示←→非表示，リストのアニメーションに対して Transition を提供しています．一方，

●要素のサイズやその他のプロパティ
これらはすべて、生の数値として保持されているか、あるいは数値に変換することが可能です。一度それをすれば、Vue のリアクティブな性質とコンポーネントシステムの組み合わせにより、状態から中間フレームを生成するためのサードパーティのライブラリを使ってアニメーションさせることができます。

とあるので，Vue 自体はコンポーネントのサイズ変更に関しては Transition を提供しているわけではなく，「サイズを Vue のデータとして取り扱うことでアニメーションに活用できる」ということみたいです．

なので，Vue の transition によって直接サイズ変更のアニメーションを組むことはできず，CSS で工夫するか，サードパーティのものを使う必要がありそうです．