Animate to an Inline Style

Sie wissen bereits, dass Inline-Styles eine „schlechte Praxis“ sind. Inline-Styles sind nicht wiederverwendbar wie CSS in separaten Dateien und somit ineffizient aufgebläht. Es sei denn, es ist nicht so. Es gibt einige Fälle, in denen Inline-Styles absolut Sinn machen. Vielleicht haben Sie eine Anwendung, in der Benutzer ihre Lieblingsfarbe auswählen und Sie dann den Hintergrund des Körpers darauf einstellen. Die Verwendung eines Inline-Styles ist in diesem Fall tatsächlich effizienter als externes CSS, da es sich um einen einzelnen Benutzer und ein einzelnes Element handelt.

Nehmen wir nun an, Sie möchten zu einem Wert animieren, der in einem Inline-Style festgelegt ist. Sagen wir, Sie möchten eine Fortschrittsanzeige animieren. Sie beginnen bei Null und müssen zu einem beliebigen beliebigen Wert hochgehen. Vielleicht sagt Ihnen ein Aufruf an den Server, wie vollständig ein Upload ist, und Sie legen den Wert davon fest.

In einem Beitrag, den ich vor fast einem Jahr veröffentlicht habe, beklagte ich, dass man nicht zu einem Inline-Style animieren kann. Sie können keine Keyframe-Animationen in Inline-Styles deklarieren und Sie wissen nicht, welchen Endwert Sie in externem CSS animieren sollen. Leider lag ich falsch, da ich diesen handfesten kleinen CSS-Trick noch nicht kannte.

<div class="progress-bar">
  <div style="width: 75%">Upload is 75% complete.</div>
</div>

Hier ist der Trick: Lassen Sie einfach die Deklaration to oder 100% im @keyframes weglassen

@-webkit-keyframes progress-bar {
   0% { width: 0; }
}
@-moz-keyframes progress-bar {
   0% { width: 0; }
}
keyframes progress-bar {
   0% { width: 0; }
}

Dann rufen Sie die Animation auf der Fortschrittsanzeige auf

.progress-bar > div { 
  -webkit-animation: progress-bar 2s;
  -moz-animation: progress-bar 2s;
  animation: progress-bar 2s;
}

Und schon animiert sich die Fortschrittsanzeige bis zum durch den Inline-Style festgelegten Wert.

Siehe den Pen Animate to an Inline Style von Chris Coyier (@chriscoyier) auf CodePen.

Besonderer Dank geht an Michael Paryna, der mir dies per E-Mail geschickt hat und mich dazu gebracht hat, es auszuprobieren.