JavaScriptにはautoprefixerがないのでanimation使用時は注意が必要

世はまさに、SCSS + autoprefixer時代!!

現在はCSSファイルを直接編集する機会は激減し、SCSS + autoprefixerでCSSを生成するのが当たり前になってきている。

おかげでコーディングの工数は激減し、autoprefixerを使用していればベンダープレフィックスのつけ忘れもない。

JavaScriptにもベンダープレフィックス追加

しかし、autoprefixerはあくまでCSSにベンダープレフィックスを自動追加するものなので、JavaScriptには追加されない。

ゆえにベンダープレフィックスを必要とするAndroid 4系などはJavaScriptでstyleを追加された際にベンダープレフィックスが付いていないと動かなくなってしまう。

例えばこのようなCSSが適用された要素に…

/* <div id="b"></div> */
#b {
  width: 200px;
  height: 200px;
  margin: 50px;
  background: #c00;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

1秒ごとに0〜360degのtransformのrotateを追加するコードを書いたとする。

var b = document.getElementById('b');
setInterval(function() {
  b.style.transform = 'rotate(' + Math.floor(Math.random() * 360) + 'deg)';
}, 1000);

このコードは最新のブラウザでは動くがAndroid 4系の標準ブラウザなどでは動作しない。

試しにstyle.animationが定義されているか確認するコードをalertで実行すると最新のブラウザではtrueになるが、未対応ブラウザではfalseを返してしまう。

transform追加したサンプル

これを防ぐにはstyle.animationが有効のときはtransform、無効のときはwebkitTransformを使用するように分岐する。

var b = document.getElementById('b');
var isAnimation = b.style.animation !== undefined;
var transform = isAnimation ? 'transform' : 'webkitTransform';
alert('isAnimation: ' + isAnimation);
setInterval(function() {
  b.style[transform] = 'rotate(' + Math.floor(Math.random() * 360) + 'deg)';
}, 1000);

transformとwebkitTransformを追加したサンプル