CSS3の2D 3D Transforms系モジュールのアニメーションをjQuery実装するのに便利なTransit.js

CSS3の2D 3D Transforms系モジュールをアニメーションさせるたくてもjQueryのanimate関数では対応していない。

別にanimateでtransforms系モジュールも対応させるためのプラグインをかませる必要がある。

jquery-css-transform.js

とか。

で、今回はTransit.jsを利用してみる。

Transit.jsの利点は、Transforms系に限らず様々なアニメーションが用意されていて、animate関数にかわりtransition関数で定義するだけ。

$('.box').transition({ rotate: '45deg' });

こんな感じに。これで回転させることができる。

アニメーションさせずに単にcssの切り替えであれば

$('.box').css({ rotate: '45deg' });

とすることで実装でき、通常の.css()と同じように扱えてわかりやすい。

1点注意する点としては、現在のこころサポートするIEのバージョンは10+となっていることろ。
Win7 IE9で試したところrotateは動いたので、もしかしたら部分的にはOKなのかも。

カテゴリー: javascript   作成者: hello パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA