@starting-style による入力アニメーションの簡素化

スムーズな入力アニメーションを作成するのは難しい場合があります。 DOM の読み込み時間と display: none からのアニメーションの複雑さにより、イライラする結果が生じることがよくあります。 @starting-style ルールは、要素が最初に表示されるときに CSS プロパティの初期値を明示的に定義できるようにすることで、合理化されたソリューションを提供し、最初からシームレスな遷移を保証します。

その他の例を含む記事全文はこちらでご覧いただけます。

---

基本を理解する

@starting-style は、要素が表示される前の CSS プロパティの初期状態、つまり「前の」状態を設定します。 「後」の状態は、標準の CSS ルールで定義されます。 仕組みは次のとおりです:

element {
  transition: opacity 0.5s ease-in;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

初期ロード時に、@starting-style は要素の不透明度を 0 に設定します。その後、最終状態 (この場合は不透明度: 1) にスムーズに移行します。この機能は、要素が display: none から表示状態に遷移するときにも適用されるため、切り替えられた要素をアニメーション化するのに最適です。

@starting-style

の利用

@starting-style は 2 つの方法で適用できます。要素のルールセット内でネストする (セレクターは不要) か、セレクターを使用して個別に定義します。

重要な注意: 疑似要素 (@starting-style や ::before など) 内で ::after をネストすると、意図したとおりに機能しません。スタイルは、擬似要素ではなく、親要素に影響します。

/* Standalone */
@starting-style {
  element {
    opacity: 0;
  }
}

element {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Nested */
element {
  opacity: 1;
  transition: opacity 0.5s ease-in;

  @starting-style {
    opacity: 0;
  }
}

重要な考慮事項: @starting-style と「元のルール」の特異性は同等です。信頼性の高い適用を行うには、常に @starting-style の at-rule を「元のルール」 の後に 配置します。

実際の応用

@starting-style は、エントリーエフェクトとトランジションの作成に優れています。 ページ読み込み時のテキストのフェードインや、ポップアップやダイアログのアニメーション化に使用することを検討してください。 以下にいくつかの例を示します:

display: none

からのアニメーション

@starting-style の主な利点は、最初は非表示の要素、特に display: none から移行する要素に対してスムーズな遷移を作成できることです。 @starting-style がないと、開始状態が定義されていないため、この遷移をアニメーション化するのは困難です。 @starting-style は、初期状態を提供することでこれを解決します。

dialog 要素は明確な図を提供します。その体はdisplay: noneとdisplay: blockの間で切り替わります。 display プロパティの変更により、これをアニメーション化することは通常は不可能ですが、@starting-style を使用すると実現可能になります。

ページ読み込み時のフェードとスライド

この例では、@starting-style は両方の要素の「前」の状態を定義します。 フェード効果は初期の不透明度を 0 に設定しますが、スライド効果は左の移動を使用します。

---

この記事はエントリーアニメーションに焦点を当てました。 終了効果は @starting-style では処理されません。 終了アニメーションについては、transition-behavior を調べる必要があります。これについては別の説明で取り上げます。

記事全文はこちらでお読みください。 私のブログこちらにアクセスしてください。

以上が@starting-style による入力アニメーションの簡素化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。