ずらんだCSSトランジション

Elements Hover（移動する要素など）が非常に簡単な場合、興味深いビジュアルを実装することは非常に簡単です。しかし、複数のリスト項目があり、各リスト項目の動きがインターレースアニメーション時間を持たせたい場合、どのようにそれを達成できますか？

次のコードはtransition-delay属性を介してインターリーブアニメーション効果を実現する方法を示しています。最初に、各リスト項目を選択し、異なる遅延時間を適用します。

 @media（Hover：Hover）{
  .li li a span {
    変換：翻訳（100px）;
    遷移：0.2秒;
  }
  .list：ホバースパン{
    変換：翻訳（0）;
  }
  .list li：nth-​​child（1）span {
    トランジションデレイ：0S;
  }
  .list li：nth-​​child（2）span {
    トランジションデレイ：0.05s;
  }
  .list li：nth-​​child（3）span {
    トランジションデレイ：0.1S;
  }
  .list li：nth-​​child（4）span {
    トランジションデレイ：0.15秒;
  }
  .list li：nth-​​child（5）span {
    トランジションデレイ：0.2秒;
  }
  .list li：nth-​​child（6）span {
    トランジションデレイ：0.25秒;
  }
}

レイテンシをより柔軟に制御するために、CSSを使用してプロパティをカスタマイズできます。

 @media（Hover：Hover）{
  .list {
     - デレイ：0.05S;
  }
  .li li a span {
    変換：翻訳（100px）;
    遷移：0.2秒;
  }
  .list：ホバースパン{
    変換：翻訳（0）;
  }
  .list li：nth-​​child（n）span {
    トランジションデレイ：calc（var（ -  delay） *（n-1））;
  }
}

このメソッドはcalc()関数を使用して遅延時間を動的に計算し、コードをよりシンプルで拡張しやすくします。 nリスト項目のシーケンス番号を表します。

リスト項目が大きい場合、上記の方法は冗長に見える場合があります。 SASSループを使用してコードを生成できます。

 @media（Hover：Hover）{
  .li li a span {
    変換：翻訳（100px）;
    遷移：0.2秒;
  }
  .list：ホバースパン{
    変換：翻訳（0）;
  }
  @for $ iは0〜20 {
    .list li：nth-​​child（https://www.php.cn/link/93ac0c050dd620dc7b88e5fe05c70e15b {$ i 1}）span {
      トランジションデレイ：0.05s * $ i;
    }
  }
}

このSASSコードループは、21個のリスト項目のtransition-delay属性を生成します。 21個未満のリスト項目がある場合でも、GZIP圧縮後に過剰なコードが効果的に削減されます。

最後に、HTMLから遅延値を渡すこともできます。

• これ
• 少し

@media（Hover：Hover）{
  .li li a span {
    変換：翻訳（100px）;
    遷移：0.2秒;
  }
  .list：ホバースパン{
    変換：翻訳（0）;
    トランジションデレイ：var（ - 遅延）; /* htmlから遅延値を取得*/
  }
}

選択する方法は、プロジェクトの特定のニーズと個人的な好みに依存します。 SASSループ法は、保守性とスケーラビリティに利点がありますが、カスタム属性メソッドはより簡潔で柔軟です。また、HTMLに直接設定すると便利ですが、メンテナンスにはあまり便利ではない場合があります。

以上がずらんだCSSトランジションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。