jQuery CSS3 transform及びtransitionが動作するかどうかの判別方法 – CSS3アニメーションとjQueryアニメーションの使い分け

この記事は3年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

こんにちは。Toshikuraです。今日のTipsは【jQuery CSS3 transform及びtransitionが動作するかどうかの判別方法】です。先日jQueryでCSS3アニメーションの終了のタイミングを取得する方法という記事を書きましたが…どうしても特定のブラウザではCSS3アニメーションが動きません。今回はその判別にも使える判別方法をメモしておきます。

jQueryを用いた判別

$.support.transform  = typeof $(“body”).css(“transform”) === “string”;
$.support.transition = typeof $(“body”).css(“transitionProperty”) === “string”;

if($.support.transition){
//transitionが動作する場合。
$(‘.class’).css({‘transition’:’all 0.3s’,~~~~~});
}else{
//transitionが動作しない場合。
$(‘.class’).animate({~~:~~},300);
}

参照:jQueryでtransformとtransitionをサポートしてるかどうかの判別

Modernizrを用いた判別

Modernizrを用いた判別方法です。詳しくは公式サイトをご参照ください。これを使えばCSS3Transitionだけではなくboxshadow等の判別、はたまたHTML5Canvasの使用可否の判別、HTML5で追加された input type の判別まで実現できる優れものです。jQueryのバージョンが上がりブラウザ単位での判別自体できなくりましたので、まだ試していない方は一度使ってみても良いかと思います。

Transition判別

if(Modernizr.csstransitions){
//transitionが動作する場合。
}else{
//transitionが動作しない場合。
}
Transforms判別

if(Modernizr.csstransforms){
//csstransformsが動作する場合。
}
蛇足:HTML5 CANVASの判別

if(Modernizr.canvas){
//canvasが動作する場合。
}

以上になります。Modernizrに関しては詳しく書くと長くなりますので…また別途記事化します。