Knockout.jsで新しいコンテンツが現在のコンテンツの上からスライドして入ってくるトランジションを作る

本記事ではタイトルに示すようにKnockout.jsで新しいコンテンツが現在のコンテンツの上からスライドして入ってくるトランジションの実装方法を説明する。文章だけではわかりにくいので以下に成果物のGIFを示す。 Knockout.jsでは、templateバインディングを用いると、ある種類のデータを表示するためのテンプレートを定義しておき、JS上でデータを与えると自動的にそのテンプレートを用いて描画するということができる。新しいデータを設定すると、明示的に変更を反映するような操作を行わずとも表示も更新される。 templateバインディングを拡張すれば、描画の前後にDOMの操作を行う新たなバインディングを作成することができる。これを利用して、 描画する直前に元々の要素をクローンする 元の要素を画面外右側へ移動する 元の要素を新しいデータで更新する 元の要素を通常の場所までトランジション付きで移動させる 移動が完了したら、クローンした要素を消す という手順で目標が達成できる。 完全なコードを以下に示す。なお、トランジションの時間もバインディングの際のプロパティで指定できるようにしてみた。 HTML: <!DOCTYPE »