第2回 #megroes で飛び入り LT した時のスライドです。

1. アニメーションの実装
つらい話

2. @ktsn

3. Velocity.js
$el.velocity({
width: 100,
height: 200
}, {
duration: 500,
easing: easeOutQuad ,
complete: _ => {
console.log( finished );
}
});

4. ふるまいと順序を分離
const zoom = {
p: {
width: 100,
height: 200
}
o: {
duration: 500,
easing: easeOutQuad
}
};
$el.velocity(zoom).velocity(otherAnimation);

5. RunSequence 使う
$.Velocity.RunSequence([
{ e: elA, p: zoomIn.p, o: zoomIn.o },
{ e: elB, p: zoomIn.p, o: zoomIn.o },
{ e: elA, p: zoomOut.p, o: zoomOut.o }
]);

6. アニメーション以外の処理
いれたい……
$.Velocity.RunSequence([
{ e: elA, p: zoomIn.p, o: zoomIn.o },
{ e: elB, p: zoomIn.p, o: zoomIn.o },
{ e: elA, p: zoomOut.p, o: $.extend({
complete: () => {
console.log( hoge );
}
}, zoomOut.o)}
]);

7. 場合によって微妙に
値変えたい……
const fadeIn = {
p: {
opacity: [1, 0]
},
o: {
delay: 300,
duration: 500
}
}

8. こうやりたい！
$.Velocity.RunSequence([
{ e: elA, opts: zoomIn }.delay(1000),
{ e: elB, opts: zoomIn },
_ => console.log( hoge )
]);

9. つくった
https://github.com/ktsn/vq

10. こんな感じで書ける
vq.sequence([
vq(elA, zoomIn).delay(1000),
vq(elB, zoomIn),
_ => console.log( hoge )
]);