Verschiedene Ansätze zum Erstellen einer gestaffelten Animation

Grundlegende Animation ist einfach: Definieren Sie Keyframes, nennen Sie Animationen und wenden Sie sie auf Elemente an. Manchmal sind jedoch komplexere Techniken erforderlich, um den idealen Animationseffekt zu erzielen. Zum Beispiel kann ein Tongleicher dieselbe Animation für jeden Balken verwenden, aber er ist verschachtelt, um die Illusion unabhängiger Animationen zu erstellen.

Kürzlich möchte ich beim Erstellen eines Dashboards, dass die Elemente eines der Widgets in einer Interlaced -Animation angezeigt werden.

Wie der Sound-Equalizer oben habe ich angefangen, den :nth-child -Selektor zu verwenden. Ich benutze eine ungeordnete Liste (<ul></ul> ) Geben Sie ihm als übergeordneter Container eine Klasse an und verwenden Sie den :nth-child -Pseudo-Selektor, um die Animation jedes Listenelements per animation-delay auszugleichen.

 .My-list li {
  Animation: My-Animation 300 ms.
}

.My-list li: nth-Kind (1) {
  Animation-Zelay: 100 ms;
}

.My-List Li: N-te-Kind (2) {
  Animation-Delay: 200 ms;
}

.My-List Li: N-te-Kind (3) {
  Animation-Zelay: 300 ms;
}

/* und so weiter*/

Diese Technik macht die Gegenstände sehr gut, insbesondere wenn Sie wissen, wie viele Elemente zu einem bestimmten Zeitpunkt in der Liste stehen. Dieser Ansatz schlägt jedoch fehl, wenn die Anzahl der Elemente unvorhersehbar ist (dies ist der Fall bei den Widgets, die ich für das Dashboard erstellt habe). Ich möchte wirklich nicht jedes Mal, wenn die Anzahl der Elemente in der Liste ändert, zu diesem Code zurückkehren. Deshalb habe ich eine schnelle Sass -Schleife geschrieben, mit der bis zu 50 Elemente verhandelt und die Animationslatenz hinzufügen können, wenn jedes Element erhöht wird:

 .My-list {
  li {
    Animation: My-Animation 300 ms.

    @Für $ i von 1 bis 50 {
      &: nth-child (#{$ i}) {
        Animation-Delay: 100 ms * $ i;
      }
    }
  }
}

Dies sollte das Problem lösen! Es fühlt sich jedoch zu ungeschickt an. Natürlich wird es der Datei nicht zu viel Gewicht verleihen, aber Sie wissen, dass kompilierte CSS viele nicht verwendete Selektoren wie nth-child(45) enthalten wird.

Es muss einen besseren Weg geben. Normalerweise wende ich mich an JavaScript, um alle Projekte zu finden und Verzögerungen hinzuzufügen, aber… diesmal habe ich einige Zeit damit verbracht, zu erforschen, ob es mit CSS alleine gemacht werden könnte.

Wie wäre es mit CSS -Zählern?

Das erste, was mir in den Sinn kommt, ist, einen CSS -Zähler mit der Funktion calc() zu verwenden:

 .My-list {
  Gegenüberliegen: My-Counter;
}

.My-list li {
  Gegeninkrement: My-Counter;
  Animation-Delay: Calc (Zähler (My-Counter) * 100 ms);
}

Leider funktioniert dies nicht, da die Spezifikation feststellt, dass der Zähler in calc() nicht verwendet werden kann:

Die Komponente des calc() -Presses kann ein wörtlicher Wert oder attr() oder calc() -Ausdruck sein.

Es stellt sich heraus, dass manche Leute die Idee mögen, aber es ist noch nicht außerhalb der Entwurfsbühne.

Wie wäre es mit Datenattributen?

Nachdem ich den Auszug aus der Spezifikation gelesen hatte, erfuhr ich, dass calc() attr() verwenden kann. Und gemäß dem CSS -Wert und der Einheitspezifikation:

In CSS3 kann der attr() Ausdruck viele verschiedene Arten von Werten zurückgeben

Das erinnert mich; Vielleicht können die Datenattribute das Problem lösen.

• Punkt 1
• Punkt 2
• Punkt 3
• Punkt 4

.My-list li {
  Animation-Delay: Calc (Attr (Datenzählige) * 150 ms);
}

Aber meine Hoffnungen sind gestrichelt, weil dieser Browserunterstützung sehr schlecht ist!

Dieser Browser unterstützt Daten von Caniuse, die weitere Details enthält. Die Nummer zeigt an, dass der Browser diese Funktion in dieser Version und später unterstützt.

Desktop

Mobilfunk/Tablet -PC

Also zurück zum Zeichenbrett.

Wie wäre es mit benutzerdefinierten Eigenschaften?

Meine nächste Idee ist es, CSS zu verwenden, um Eigenschaften anzupassen. Es ist nicht schön, aber es funktioniert?

Es stellt sich heraus, dass es auch flexibel ist. Zum Beispiel können Animationen umgekehrt werden:

Es kann auch etwas völlig zufällige und animierte Elemente gleichzeitig tun:

Wir können sogar noch einen Schritt weiter gehen und eine diagonale Schaukel machen:

Der Browser -Support ist nicht so schlimm ( Pop -up Internet Explorer ).

Dieser Browser unterstützt Daten von Caniuse, die weitere Details enthält. Die Nummer zeigt an, dass der Browser diese Funktion in dieser Version und später unterstützt.

Desktop

Mobilfunk/Tablet -PC

Ein großartiges Merkmal von CSS ist, dass es dank Kaskadierungen Dinge ignoriert, die es nicht versteht. Dies bedeutet, dass alles zusammen in die Sicht animieren wird. Wenn dies nicht Ihr Stil ist, können Sie eine Funktionsabfrage hinzufügen, um die Standardanimation zu überschreiben:

 .My-list li {
  Animation: Fallback-Animation;
}

@Supports (-Variablen) {
  .My-list li {
    Animation: Fancy-Animation;
    Animation-Delay: Calc (var (-Animationsordnung) * 100 ms);
  }
}

Einheimische CSS Lange Live

Je mehr ich inne machte, um mich zu fragen, ob ich JavaScript brauchte, desto mehr war ich überrascht, was CSS selbst tun könnte. Wenn der CSS -Zähler in der calc() -Funktion verwendet werden kann, wäre dies natürlich eine sehr elegante Lösung. Aber vorerst bieten Inline -benutzerdefinierte Eigenschaften eine leistungsstarke und flexible Möglichkeit, dieses Problem zu lösen.

Das obige ist der detaillierte Inhalt vonVerschiedene Ansätze zum Erstellen einer gestaffelten Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!