よろめくアニメーションを作成するためのさまざまなアプローチ

基本的なアニメーションはシンプルです。キーフレームを定義し、アニメーションに名前を付け、要素に適用します。しかし、理想的なアニメーション効果を実現するには、より複雑な手法が必要になる場合があります。たとえば、サウンドイコライザーは各バーに同じアニメーションを使用する場合がありますが、独立したアニメーションの幻想を作成するためにインターリーブされます。

最近、ダッシュボードを構築するときは、ウィジェットの1つのアイテムがインターレースアニメーションに表示されたいと考えています。

上記のサウンドイコライザーのように、私は:nth-childセレクターを使用し始めました。順序付けられていないリストを使用します（<ul></ul> ）親コンテナとして、クラスを提供し、次のクラスを使用して:nth-child pseudoセレクターを使用して、各リスト項目のアニメーションをanimation-delayによって相殺します。

 .My-ListLi {
  アニメーション：My-Animation 300ms Ease-Out;
}

.my-list li：nth-​​child（1）{
  アニメーション遅延：100ms;
}

.my-list li：nth-​​child（2）{
  アニメーション遅延：200ms;
}

.my-list li：nth-​​child（3）{
  アニメーション遅延：300ms;
}

/* 等々*/

この手法は、特にいつでもリストにあるアイテムの数がわかっている場合、アイテムを非常によく驚かせます。ただし、このアプローチは、アイテムの数が予測不可能な場合に失敗します（これは、ダッシュボード用に構築したウィジェットの場合です）。リスト内のアイテムの数が変更されるたびにこのコードに戻りたくないので、最大50個のアイテムを処理し、各アイテムが増加するにつれてアニメーションのレイテンシを追加できるクイックSASSループを書きました。

 .my-list {
  li {
    アニメーション：My-Animation 300ms Ease-Out;

    @for $ i 1〜50 {
      ＆：nth-​​child（＃{$ i}）{
        Animation-Delay：100ms * $ i;
      }
    }
  }
}

これは問題を解決するはずです！しかし、それはあまりにも不器用に感じます。もちろん、ファイルにあまり多くの重量を追加することはありませんが、コンパイルされたCSSには、 nth-child(45) 。

より良い方法がなければなりません。通常、私はすべてのプロジェクトを見つけて遅延を追加するためにJavaScriptに頼りますが、今回はCSSで単独で行うことができるかどうかを探索するのに少し時間を費やしました。

CSSカウンターはどうですか？

最初に思い浮かぶのはcalc()関数を使用してCSSカウンターを使用することです。

 .my-list {
  カウンターレセット：私の店。
}

.My-ListLi {
  カウンターインクリメント：私の店。
  Animation-Delay：Calc（Counter（My Counter） * 100ms）;
}

残念ながら、これは機能しません。仕様では、カウンターはcalc()では使用できないと述べているためです。

calc()のコンポーネントは、リテラル値またはattr() 、またはcalc()式になります。

一部の人々はこのアイデアを好むことがわかりますが、それはまだドラフトステージから外れていません。

データ属性はどうですか？

仕様からの抜粋を読んだ後、 calc() attr()を使用できることを学びました。そして、CSSの値とユニットの仕様に従って：

CSS3では、 attr()式はさまざまなタイプの値を返すことができます

これは私に思い出させます。たぶん、データ属性が問題を解決できる可能性があります。

• アイテム1
• アイテム2
• アイテム3
• アイテム4

.My-ListLi {
  Animation-Delay：calc（attr（data-count） * 150ms）;
}

しかし、このブラウザのサポートが非常に悪いので、私の希望は打ち砕かれています！

このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレットPC

したがって、図面に戻ります。

カスタムプロパティはどうですか？

私の次のアイデアは、CSSを使用してプロパティをカスタマイズすることです。きれいではありませんが、機能しますか？

柔軟性もあります。たとえば、アニメーションを逆にすることができます。

また、完全にランダムな要素とアニメーションの要素を同時に行うこともできます。

さらに一歩進んで、斜めのスイングを行うこともできます。

ブラウザのサポートはそれほど悪くありません（インターネットエクスプローラーをポップアップします）。

このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレットPC

CSSの優れた特徴は、カスケードのおかげで、理解していないことを無視することです。これは、すべてが一緒にビューにアニメーション化されることを意味します。これがあなたのスタイルではない場合は、機能クエリを追加してデフォルトのアニメーションをオーバーライドできます。

 .My-ListLi {
  アニメーション：フォールバックアニメーション。
}

@supports（-variables）{
  .My-ListLi {
    アニメーション：ファンシーアニメーション。
    Animation-Delay：calc（var（ -  animation-order） * 100ms）;
  }
}

ネイティブCSS Long Live

JavaScriptが必要かどうかを自問するほど、CSS自体ができることに驚きました。もちろん、CCSSカウンターをcalc()関数で使用できる場合、これは非常にエレガントなソリューションになります。しかし今のところ、インラインカスタムプロパティは、この問題を解決するための強力で柔軟な方法を提供します。

以上がよろめくアニメーションを作成するためのさまざまなアプローチの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。