フレームごとに再描画したり、ページのパフォーマンスに深刻な影響を与えたりすることなく、CSS で box-shadow プロパティをアニメーション化するにはどうすればよいでしょうか?答えは「達成できない」です。 box-shadow でのアニメーション化された変更はパフォーマンスに悪影響を与える可能性があるためです。
上記の問題を解決する簡単な方法を次に示します。再描画を最小限に抑えたい場合は、擬似要素を作成し、その不透明要素をアニメーション化して、1 秒あたり 60 フレームでアニメーション化して、移動オブジェクトと同じ効果を模倣する必要があります。
例
この例をよく見て、そこで使用したさまざまなテクニックを比較してください。 2 つの効果は同じに見えると思いますか?唯一の違いは、影を適用してアニメーション化する方法です。左側の例では、マウスホバー時にボックスシャドウをアニメーション化します。右側の例では、::after を使用して疑似要素を追加し、それに影を設定し、要素の不透明要素をアニメーション化します。
開発ツールを使用してこれらのいずれかを試してみると、次のようなものが表示されるはずです (緑色のバーは描画されていることを意味し、少ないほど良いです):
右側にカーソルを置いたカード (擬似要素の不透明度でアニメーション) と比較して、左側のカード (ボックスの影でアニメーション) をマウスオーバーすると、より多くの再描画があることが明らかです。
なぜこのような効果が見られるのでしょうか? CSS プロパティのうち、 opacity と transform など、アニメーション化されたときにフレームごとに一定の再描画がトリガーされないものはほとんどありません。再描画 (ブラウザが行う必要がある作業) を最小限に抑えるために、アニメーションではこれら 2 つのプロパティのみを変更することを推奨します。
他のレイアウト スタイルはさておき、これが これら 2 つのテクノロジーの主な違い ︰
/* The slow way */.make-it-slow { box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: box-shadow 0.3s ease-in-out:}/* 鼠标悬停实现更大阴影的过渡 */.make-it-slow:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.3);}/* The fast way */.make-it-fast { box-shadow: 0 1px 2px rgba(0,0,0,0.15);}/* 设置更大的阴影并将之隐藏 */.make-it-fast::after { box-shadow: 0 5px 15px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s ease-in-out:}/* 鼠标悬停时实现更大阴影的过渡显示 */.make-it-fast:hover::after { opacity: 1;}ログイン後にコピー
詳細な内訳
上記に基づくそれはさておき、上の例で示した 3D カード効果を作成する方法を見てみましょう。最初のステップは、上で行ったのと同じように、シャドウを擬似要素に転送することです。また、作成したすべてのカードにレイアウト コードを追加しましょう:
/* 创建一个简单白色盒子,并添加阴影 */.box { position: relative; display: inline-block; width: 100px; height: 100px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: all 0.3s ease-in-out;}/* 创建隐藏的伪元素 *//* 最终样式包含阴影 */.box::after { content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: opacity 0.3s ease-in-out;}ログイン後にコピー
これら 2 つの要素をアニメーション化したいため、transition 要素を .box と .box::after に追加していることに注意してください。 .box と .box::after への不透明要素
これらのスタイルは、微妙なボックスシャドウ スタイルを持つ白いボックスを示しています。ここでは、 .box::after のシャドウは完全に非表示になっており、ボックス効果と相互作用することはできません。
デモと同じ効果を作成するには、次に行う必要があるのは、マウスが .box 上にあるときに拡大効果を作成し、擬似要素と影にフェードを実装することです。
/* 放大盒子 */.box:hover { transform: scale(1.2, 1.2);}/* 伪元素更大阴影的淡化 */.box:hover::after { opacity: 1;}ログイン後にコピー
とにかく、これは、さまざまなブラウザーの互換性のあるスタイルといくつかの追加のカスタム イージング効果を含むすべての CSS スタイルです:
.box { position: relative; display: inline-block; width: 100px; height: 100px; background-color: #fff; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); border-radius: 5px; -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}.box::after { content: ""; border-radius: 5px; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); opacity: 0; -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}.box:hover { -webkit-transform: scale(1.25, 1.25); transform: scale(1.25, 1.25);}.box:hover::after { opacity: 1;}ログイン後にコピー
適用された box-shadow を使用するだけと比較すると、明らかにここです。同じアニメーション効果を実現するために多くの CSS が使用され、パフォーマンスが向上しました。なぜわざわざ？
デスクトップがボックス シャドウ アニメーションを問題なく処理できるとしても、携帯電話もおそらく問題なく処理できません。しかし、より複雑なレイアウトに取り組むと、デスクトップに症状が現れ始めることがあります。
トランジションとアニメーションにのみ変換要素と不透明度要素を適用し続けると、最高のパフォーマンス、つまり最高のユーザー エクスペリエンスが達成されます。
この記事は、@Tobias 氏の「How to animate "box-shadow" with Silky Smooth Performance」を基に翻訳したものであり、翻訳が不十分な場合や、翻訳内容に独自の解釈が含まれています。間違っています 同僚にアドバイスを求めてください。この翻訳を転載したい場合は、英語の出典を明記してください: http://tobiasahlin.com/blog/how-to-animate-box-shadow/。
Jingzi
現役学生、コンピューターサイエンスを専攻する学部生。積極的で笑いが大好きな女の子。フロントエンドが大好きで、他の人とコミュニケーションしたり共有したりするのが好きです。自分の心の中の自分を自分の努力で実現したいと思っています。 Weibo: @京-如秋叶
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
