コハムコハムWebクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。effects記事は上記記事を意訳したものです。※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。noneの切り替えや初回レンダリングのための純粋なCSSトランジション戦略を完成させるのに役立つかもしれないと思いました。ダイアログとポップオーバーは、どちらもブラウザによってdisplayが切り替えられます。中断可能なモーション簡単なスタガリングの可能性これはほぼ、トランジションを使用したDOM要素の統一的なオーケストレーションです。noneを使用する必要があることです。Caniuse?この投稿では新しい機能がいくつか使用されています。noneから戻る時@starting-styleは、ステージ外の開始位置を描写しています。1)に移行すると言っています。入場と退場を区別しやすくするため、入場時は拡大した状態から始まり、休止位置に向かって縮小します。上から浮いてきたような感じです。}}これで、要素がステージに入る際に縮小してフェードインするようになりました👍🏻ただし、注意してください。単なるクロスフェードではありません。}}ステージ退場ここでtransition-behaviorが登場します。noneを設定すると、ブラウザがすぐにステージから要素を削除するため、トランジションが実行される時間がありません。noneの変更を適用する前に経過すべき時間を指定できます。noneに設定されたときに即座に非表示にせず、.5s待ちます。これはトランジションの実行時間とちょうど同じです。何か足りないものがあります...そうです、退場時のスタイルです!opacity、scale、displayをスタイリングできる状態をトリガーする何かが必要です。}}これで、要素に[hidden]属性が与えられたとき、ステージ外のスタイルを記述します。私は退場アニメーションを入場アニメーションよりも少し速くするのが良いと思うので、持続時間を.4sにしてease-out効果を加えました。!importantが追加されていることに注意してください。ブラウザは属性に対してこれを自動的に提供しますが、その詳細度は弱いです。要素にカスタムのdisplayタイプが設定されている場合、noneは適用されず、効果が失われます。これは、独自のタイプのフラグをここで使用できることも意味します。[hidden]」ボタンを使用すると、この効果を試すことができます。ダイアログとポップオーバー&[hidden]セレクタに追加することで、と[popover]要素も他の要素と同じように退場できるようになります。}}の場合、ダイアログが非表示になっているかどうかを知るために:modalの疑似クラスを使用しています。[popover]の場合、ポップオーバーが非表示になっているかどうかを知るために:popover-openの疑似クラスを使用しています。デモでダイアログやポップオーバーの表示ボタンを使用すると、この効果を試すことができます。@layerのフレーバーカスケードレイヤーを使用すると、匿名レイヤーを作成できます。私はこれを2つの部分からなる機能と考えており、これは*に広く適用されるこの入退場トランジションスタイルにうまく適合します。...}これまでに作成したネストされたスタイルのセット全体をラップすることで、#1と#2を達成できます。}}私はこの効果が好きですし、カスケードレイヤーも好きです。必要なければこの@layerを使わなくても大丈夫です。noneにトランジションしたら、ノードをクリーンアップしたいですよね。node.remove()}これでクリーンアップが簡単になりました。デモの「remove」ボタンを使用すると、この効果を試すことができます。結論このCSSの一部は少し不思議に見えるかもしれませんが、最終的なスニペットに至るまでの道のりは理にかなっていると思います。これをクラスなどにスコープを限定するのも理にかなっていると思います。すべての要素に対してこの結果が望ましくないシナリオもあるでしょう。概念的にすべてをターゲットにするのは確かに楽しいです。ビュートランジションは、これが解決する問題の一部に対して良いオプションですが、中断可能ではありません。ダイアログやポップオーバーとの統合も簡単ではありません。トランジションは素晴らしく、ダイアログやポップオーバーの場合、ユーザーが効果を中断できるのは確かに価値があります。#1:の::backdropをトランジションさせたい場合は、いくつかのスタイルを追加する必要があります。目的によってはoverlayもトランジションさせる必要があるかもしれません。ダイアログとポップオーバーを完全にトランジションさせる、より実験的でないスニペットについては、このCodepenを参照し、そこからCSSを流用してください。#2:すべてのトランジションが完了したことを知るための関数が更新されました。今では100%信頼性があり、getAnimations()を使用しています。テスト中にこれを試したところ、配列が空でした。後になって、それはトランジションが実行されていないからだとわかりました。トランジションが開始されると、getAnimations()は各トランジションと.finishedプロミスを返します。記事は上記記事を意訳したものです。balance、light...iOS17.5の配信と同時にSafariも17.5にアップデートされました。10:30Webクリエイターのコハムです。地味な事務職からWeb制作会社に転職してフリーランスになりました。キンクマハムスターと2人暮らし。3©コハム引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。