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

プロパティのアニメーション：css革命？display

CSSワーキンググループは最近、

プロパティのアニメーションと移行を許可する提案を承認しました。これは重要な開発です。 これは、たとえば、displayとdisplay: block。 display: none

これはユニークな課題を提示します。 現在、設定

は、実行中のアニメーションを突然停止します。 それを追加すると、それらが再起動されます。 仕様は明確になります：設定

はアニメーションを終了します。 display: noneをdisplay: noneから別の値に変更すると再起動します。display noneこの一見逆説的な行動は、最初に提案が実行できなかったことを示唆していました。ただし、重要なのは、

以外のディスプレイ値@keyframesに優先順位を付けることです。 これにより、アニメーションが完全に完了するまで、アニメーションを中断または再起動することができなくなります。 ミリアムの説明（これらの「トート」と呼びましょう、私たちは？）はプロセスを明確にします。それはとnoneの間を補間することではなく、アニメーションが終了するまでアクティブな状態を維持できるようにします。 アニメーションは個別のままです。アニメーションが終了した後、状態を切り替えますnone

ロバート・フラックの例はこれを示しています：block none block初期フレームはnone、をオーバーライドし、の前にアニメーションを完了するように優先順位を付けます。

ミリアムのマストドンの例では、遷移を使用しています：

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

ここで、display: blockが最初に設定されており、ドキュメントフローから要素を削除します。 ホバーでは、不透明な移行が完了した後にdisplay: none値が優先され、遷移が可能になります。 noneこれは大きな進歩ですが、多くのことに対処する必要があります。 複数のアニメーション、無限のアニメーション、逆のアニメーションなどとの相互作用には、さらに考慮する必要があります。 それにもかかわらず、これは画期的な一歩です！

以上がしたがって、表示プロパティをアニメーション化したいと思いますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。