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!