- 2015-7-18
普通にtransformを行う場合、
画像の上にマウスを置いてからほんの少し待ってみると、
transformのレンダリング完了後に描画の最適化が発生する。
これに対し、レンダリング対象のオブジェクトに対して、
will-changeプロパティの値に設定した動作(この場合ではtransform)の後に最適化(ちらつき)が発生しない。
| will-change なし | will-change あり |
|---|---|
img src=”~~~~.jpg” class=”grow”
|
img src=”~~~~.jpg” class=”grow will”
|
img.grow {
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover ,img.grow_hover{
-webkit-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
-ms-transform:scale(1.2,1.2);
-o-transform:scale(1.2,1.2);
transform:scale(1.2,1.2);
}
.will{
will-change: transform;
}
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover ,img.grow_hover{
-webkit-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
-ms-transform:scale(1.2,1.2);
-o-transform:scale(1.2,1.2);
transform:scale(1.2,1.2);
}
.will{
will-change: transform;
}