Die prägnanteste Art, einen CSS-Übergang zu schreiben

Question

Gibt es eine prägnantere Möglichkeit, den folgenden Code zu schreiben?

element{ 
    transition: all 700ms linear, 
     transform 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5), 
     background 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5); 
} 

Was ich versuche zu tun, um eine diferent Übergang Timing-Funktion zu transformieren und Hintergrundeigenschaften anzuwenden, während eines linearen für den Rest der Eigenschaften verwenden. Das funktioniert richtig, aber ich versuche, es als DRY wie möglich zu halten.

Answer 1

Hier kann man nicht viel machen. Sie können die Übergangsdauer getrennt angeben:

element{ 
    transition: all linear, 
     transform cubic-bezier(0.4, 0.25, 0.14, 1.5), 
     background cubic-bezier(0.4, 0.25, 0.14, 1.5); 
    transition-duration: 700ms; 
} 

Aber das ist es. Sie können Ihre benutzerdefinierte Kurve aufgrund der Art und Weise, wie durch Komma getrennte Übergangswerte funktionieren, nicht nur einmal angeben. Die gesamte Werteliste wird in der Reihenfolge wiederholt, in der sie angegeben wurden, anstatt dass der letzte Wert unendlich wiederholt wird.

Das heißt, wenn Sie dies tun:

element{ 
    transition-property: all, transform, background; 
    transition-duration: 700ms; 
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5); 
} 

Was passiert ist, dass der fehlende Wert für transition-timing-function als linear gefüllt ist, nicht Ihre benutzerdefinierten Kurve. Das Ergebnis stimmt nicht mit dem beabsichtigten Übergang für background überein.

Und wenn Sie versuchen, Vorteile aus, dass zu nehmen, indem die Reihenfolge der Übergang Eigenschaften zu verändern, wie so so, dass der fehlende Wert für background nimmt auf Ihrer benutzerdefinierten Kurve statt:

element{ 
    transition-property: transform, all, background; 
    transition-duration: 700ms; 
    transition-timing-function: cubic-bezier(0.4, 0.25, 0.14, 1.5), linear; 
} 

Was ist passiert, dass die all Übergang wird überschreiben der transform Übergang, auch wenn Sie es separat angegeben, weil die all kommt später und es enthält alle zuvor aufgeführten Eigenschaften.

Answer 2

Nach bestem CSS-Wissen (nach einer kurzen Google-Suche) ist Ihre aktuelle Methode die kürzeste (und daher auch die "trockenste") Art zu tun, was Sie wollen. Zugegeben, ich bin kein CSS-Guru, also könnte ich völlig falsch liegen.

Answer 3

Nun, der DRY Weg wäre, etwas wie SASS zu verwenden und ein Mixin zu schreiben, dann benutze das, anstatt das Kopieren dieses Codes überall zu kopieren. Ein anderer Vorschlag, den ich machen werde, ist, all zu vermeiden und stattdessen die Eigenschaften aufzuzählen, die über den linearen Übergang animiert werden sollen. Obwohl dies vielleicht etwas ausführlicher ist, wette ich, dass es viel performanter sein wird, besonders wenn Sie grafisch anspruchsvolle Dinge wie in den Stil des Elements stellen.

Also, während die Art und Weise funktionieren würde, ich fühle mich wie die mehr einzigartige Übergänge Sie haben, desto wertvoller ist diese Formulierung wird:

element { 
    transition-duration: 2s; 
    transition-property: all, background, transform; 
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14, 1.5); 
} 

Natürlich habe ich empfohlen Aufzählen Eigenschaften, teuer und unaufgeforderte Animationen zu vermeiden . In diesem Fall macht so etwas wie dies mehr Sinn:

element { 
    transition-duration: 2s; 
    transition-property: height, background, transform, width; 
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5), linear; 
} 

Edit: wie @BoltClock erwähnt, ich war falsch über alles unter diesem mutigen Text, also bitte ignorieren. Die kommagetrennten Argumente werden wieder in der Reihenfolge angewendet, in der sie ursprünglich angegeben wurden - weder die erste noch die letzte Wiederholung für zusätzliche Werte transition-property.Ich denke immer noch, was ich über die Verwendung von all nicht gesagt habe, ist ein wichtiger Ratschlag für die Leistung und die zukunftssichere Festlegung!

Beachten Sie, wie ich die Argumente bestellt: wenn es mehr Argumente für transition-property als transition-timing-function, die alle zusätzlichen Eigenschaften wird standardmäßig auf die zunächst für transition-property als Standard gelistet Wert. Also, setzen Sie ein linear (default) Wert zuerst, dann aufzuzählen, alle Ihre einzigartige Timing-Funktionen die richtige Eigenschaft entsprechen, und dann alle Eigenschaften ändern Sie an das Ende (wie width) wird automatisch auf linear Standard! Also, selbst wenn Sie 5 weitere Eigenschaften am Ende Ihrer Property-Liste hinzufügen, werden nur background und transform ihre einzigartigen cubic-bezier Timing-Funktionen haben. Zum Beispiel:

element { 
    transition-duration: 2s; 
    transition-property: height, background, transform, width, oneProp, twoProp, threeProp, etcProp; 
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5); 
} 

Alles in der oben verwendet die linear Timing-Funktion außer background und transform. Ich denke, das ist ein guter Kompromiss zwischen Performance und DRY CSS. Ich machte eine jsFiddle für Sie die verschiedenen Optionen zu prüfen, um - kommentieren Sie die verschiedenen CSS aus jeder Art und Weise, um zu versuchen:

http://jsfiddle.net/530cumas/4/