したがって、表示プロパティをアニメーション化したいと思います

CSSワーキンググループ 数週間前に高く評価した. 超大規模な概念的な提案は、たとえば、アニメーション化または移行できることです。 display: block 〜へ display: none.

設定のため、推論するのは少し頭の体操です display: none 要素のアニメーションをキャンセルします。 追加すると、アニメーションが再開されます。 仕様ごと：

設定する display プロパティへ none 要素とその子孫に適用された実行中のアニメーションを終了します。 要素の表示が none の場合、表示をそれ以外の値に更新する none によって要素に適用されたすべてのアニメーションを開始します animation-name プロパティ、および子孫に適用されるすべてのアニメーション display 以外の none.

その循環的な振る舞いが、概念が一見死んでいるように見える原因です。 だが if @keyframes サポートされている display 値 以外の none、それなら仕方がない none 物事をキャンセルまたは再開します。 それは非を与えるnone 値の優先度、許可 none アニメーションまたはトランジションが完了した後にのみそのことを行います。

ミリアムズ 警笛を鳴らします (これが私たちが実際に呼んでいるものですよね?) これがどのように機能するかを説明します:

たとえば、 block および none、しかし許容 block 物事が動きを止めて安全に適用できるようになるまで、無傷のままでいること none. これらはキーワードであるため、XNUMX つの間に明示的な値はありません。 そのため、これは個別のアニメーションのままです。 アニメーションが完了したら、XNUMX つの値を切り替えます。

これは ロバート・フラックからまっすぐ引き出されたの例 ディスカッション:

@keyframes slideaway { from { display: block; } to { transform: translateY(40px); opacity: 0;}
} .hide { animation: slideaway 200ms; display: none;
}

これは、最初のフレームが要素を display: block、原資産よりも優先されます display: none 非としてnone 価値。 これにより、アニメーションを実行して終了することができます none 解決するだけなので、プロセスでキャンセルまたはリセットする After アニメーション。

これは、Mastodon で参照されている Miriam の例です。

.hide { transition: opacity 200ms, display 200ms; display: none; opacity: 0;
}

今回はトランジションを扱っています。 根底にある display 値はに設定されています none 何かが起こる前に、ドキュメント フローから完全に除外されます。 さて、ホバー時にこれを遷移させるとしたら、おそらく次のようになります。

.hide:hover { display: block; opacity: 1;
}

…その後、要素は理論的にフェードインする必要があります 200ms. 繰り返しますが、切り替え中です display 値、しかし block 優先されるため、トランジションは事前にキャンセルされず、後で実際に適用されます opacity 移行を終了します。

少なくともそれが私の心がそれを読んでいる方法です。 整理しなければならないことがたくさんあると思うので、これらのことを熟考している非常に賢い人がいることを嬉しく思います. 同様に、要素に複数のアニメーションが割り当てられている場合はどうなりますか? none それらのいずれかをリセットまたはキャンセルしますか？ 無限のアニメーション、逆方向、およびその他のあらゆる種類のすべてが時間内に対処されると確信しています.

しかし、なんと超クールな第一歩！

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://css-tricks.com/so-youd-like-to-animate-the-display-property/