CSS3のtransitionで中断と再開を実装してみた

transitionとは

CSS3になって、アニメーションのエフェクトを簡単に実現する機能が出てきました。

その中でもtransitionは、繰り返しのないシンプルなエフェクトを実現します。
簡単な使い方をすると、エフェクト前の状態から何秒かけてエフェクト後の状態に変化させる、というものになります。
これを少し工夫すると、擬似的に変化の中断と再開を実現できます。

このエントリの目次

1. jsdo.itに置いています
2. jsdo.itのサンプル
3. ロジックの概要
4. さいごに

1.jsdo.itに置いています

こちらです。
Ubuntu の chrome やiOS、Androidのブラウザで動作確認しています。

2.jsdo.itのサンプル

棒グラフがtransitionプロパティで滑らかに伸びていきます。
「中断」ボタンを押すと、伸びるのが止まります。
「再開」ボタンを押すと、再度伸び始めます。

3.ロジックの概要

前述の通りtransitionは、エフェクト前の状態から何秒かけてエフェクト後の状態に変化させる、というものです。
ここでポイントは、エフェクトの途中で、エフェクト後の状態をリアルタイムに変更できるということです。

例えばある棒グラフがあったとして、最初は横幅0pxから100pxまで、10秒かけて変化させるように設定するとします。
5秒後にはある程度のところまで棒が伸びます。
ここで、そのタイミングで、エフェクト後の状態を0pxにすると、棒グラフは滑らかに逆に0pxまで縮んでエフェクトを完了します。

つまりエフェクト後の状態を、一時停止させたいときの幅に設定すると、エフェクトが中断しているように見えるという訳です。

ちなみにエフェクト後の状態を途中で変更しても、transitionend系のイベントは発行されます。

4.さいごに

今回のエントリは、例えば、画面上部からリストがヌルヌルとアニメーションで出てくるような仕様に適用できると思います。
途中で止めたい時に止められるので。

それでは。