vueを軸にしたanimationとtransition

※個人用メモ、箇条書き

・CSSで普通に設定する

・要素の追加や削除、順序変更はvueで検知してCSSで記述できる

Enter/Leave とトランジション一覧 — Vue.js

・インラインスタイルのバインディング

　動的にtransitionの付与や変更、animationの切り替えまでなら可能

クラスとスタイルのバインディング — Vue.js

・cssomで直接書き込む

　動的にanimationを作成したい場合、例えば下のような感じになる

var stylesheet = document.styleSheets[0];
stylesheet.insertRule("@keyframes animation {0% {width: 50px;}100% {width: 200px;}}",stylesheet.cssRules.length);

document.styleSheets - Web API インターフェイス | MDN

CSSStyleSheet.insertRule() - Web API インターフェイス | MDN

・styleタグを生成ないし変更はvueの都合上無理っぽく諦めた

・SVGの場合、プレゼンテーション属性やtransformはCSSの適用対象

SVG 属性リファレンス - SVG | MDN

SVG専用のanimationタグも存在するが、今の所使いにくい

・D3.js（他直接DOMを操作する系）の場合

　D3のtransitionを使いたかったが、

　vueのデータを更新して表示に反映させる流れが崩壊するので諦めた

・TweenMax.jsを使った場合

公式で紹介されているだけあって非常に使いやすい

数字のアニメーションやSVGの座標や半径をアニメーションしたい場合に使える

・requestAnimationFrameあるいはsetInterval、setTimeoutを使う

独自に作り込むという選択肢もある