イナヅマTVログ

[JavaScript] CSS3 transition が使えるか調べたい

| 0件のコメント

CSS3 でアニメーションをするプロパティの一つ transition。
transition が使えるかを JavaScript で調べる、メモ。

stackoverflow で教えてもらいました。
いつもいつもありがとうございます。

stackoverflow: Detect css transitions using javascript (and without modernizr)?

いくつか回答があるけど、以下な手順を踏めば良いらしい。
1. HTMLElement を作成
2. 作成した HTMLElement の style オブジェクトを取得
3. 取得した style オブジェクトが transition プロパティをもっているかを調べる

var style = document.createElement( "p" ).style,
    detected = "transition" in style || "WebkitTransition" in style || "MozTransition" in style || "msTransition" in style || "OTransition" in style;

調べるときにベンダープレフィックスを忘れないようにすると吉らしい。
変数 detected が true だと「使えるよ」となります。

ところで msTransition はいらないように思うけど、どうなんかなぁ。

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください