複数のプロパティに対して CSS Transition 短縮表現を正しく使用するにはどうすればよいですか?

複数のプロパティを使用した CSS トランジション: 短縮構文の明確化

CSS トランジションの短縮構文を使用すると、複数のプロパティを同時に遷移できます。ただし、指定された例で示されている構文は正しくありません。

短縮構文構造:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

注: 期間は長さの前に指定する必要があります。遅延が指定されている場合は遅延します。

指定されたものの短縮構文を修正する例:

transition: height 0.5s, opacity 0.5s 0.5s;

この構文は次のことを示します:

• 高さプロパティは 0.5 秒かけて遷移します。
• 不透明度プロパティは 0.5 秒かけて遷移します。 0.5の遅延あり

簡略化された構文:

すべてのプロパティを同時に遷移する場合は、次の簡略化された省略構文を使用できます:

transition: all 0.5s;

正しいコード例構文:

.element {
  transition: height 0.5s, opacity 0.5s 0.5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

この更新されたコードにより、要素の高さと不透明度がスムーズに移行するようになります。

以上が複数のプロパティに対して CSS Transition 短縮表現を正しく使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。