[css]動作がイマイチだったらwill-change

たまに使うよ。

症状とかの話

例えばレスポンシブとかを踏まえて表示領域よりもデカいサイズで画像を作って、マウスオーバーで透過したり、拡大したりする感じのギミックを付けたとする。画像がボケたりしてなんか変だなって感じになったりする。:hoverに限らずanimationでおや?ってことになったりもする。

それは仕様という見方もできるんだけど、対策することができる。

will-changeを使う

こんなのがあったとして。

<a href=""><img src="aaaaa.jpg"></a>

こう。

a img{
    transition: opacity 0.2s ease;
    will-change: opacity;
}
@media (pointer: fine) {
    a:hover img{
        opacity: 0.8;
    }
}

カンマで区切れば複数を指定できる。

a img{
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: opacity,transform;
}
@media (pointer: fine) {
    a:hover img{
        opacity: 0.8;
        transform: scale(1.1,1.1);
    }
}

そんな感じで。

なんでこれでいい感じになるのかというのは各所で語られているので割愛。初めからそういうものにしておけよとも思うけど、必ず妙な感じになるんじゃなくてケースバイケースなわけで、だから個別に対応するようにしておくのがマシンパワー的に無難なのかなとか。想像だけど。

知ってるかどうかでだいぶ変わることもあるので、覚えておいた方がいい。

コメント

タイトルとURLをコピーしました