Gibt es einen Nachteil beim Festlegen des globalen CSS3-Hintergrundübergangs für alle Elemente?

Question

Ich habe angefangen, mit CSS3-Übergängen in einem meiner Projekte herumzuspielen, und ich fand, dass ich im Grunde für jedes Element, das es bei Hover ändert, einen Übergang zur Hintergrundfarbe haben möchte.

Wenn ich etwas tun wie

a { 
    transition-property: background; 
    transition-duration: 0.15s; 
    transition-timing-function: ease-out; 
    transition-delay: 0; 
} 

oder sogar

* { 
    transition-property: background; 
    transition-duration: 0.15s; 
    transition-timing-function: ease-out; 
    transition-delay: 0; 
} 

es irgendeinen Nachteil? Da es keine Auswirkungen auf die Elemente hat, die die Hintergrundfarbe nicht ändern, ist das einzige Problem, das mir in den Sinn kommt, dass es Auswirkungen auf den Browser haben wird.

Kann die Verwendung zu vieler Transitionen dazu führen, dass der Browser verzögert wird? Oder gibt es spezielle Fälle, in denen ich Übergänge alle zusammen deaktivieren sollte?

Answer 1

Übergänge werden teuer sein, wenn die Animationen tatsächlich passieren, definitiv, aber ich denke, dass darüber hinaus wenig Effekt ist.

Der universelle Selektor ist nicht so langsam, wie die meisten Leute es schaffen. Es ist eine Art Verschwendung, Stile auf Elemente anzuwenden, die diese Stile niemals verwenden werden, aber diese Verschwendung ist nicht viel nachzuholen. Das heißt, es ist immer am besten, zu sein, auf welche Elemente Sie Übergänge anwenden möchten, aber in diesem Fall nehme ich an, eine globale Überleitung zu verwenden, klingt gerecht, wenn Sie dies rechtfertigen können.

Ich denke, Sie müssen nur vorsichtig sein, nicht Änderungen auf übergangsweise Eigenschaften für zu viele Elemente anwenden. Denken Sie in Ihrem Fall beispielsweise daran, dass der Status :hover für ein Element sowie für alle seine Vorgänger gilt (in Desktop-Browsern mit wohldefiniertem Verhalten :hover).

Für was es wert ist, moderne Browser kommen mit Hardware-Beschleunigung für eine Reihe von Dingen (IE9 + für so ziemlich alles); gepaart mit moderner Hardware ist zumindest bei Desktops und Laptops kaum ein Leistungssprung für Übergänge zu erkennen. Mobile Hardware (Smartphones und Tablets) ist möglicherweise begrenzter, aber wenn Sie mit Responsive Design arbeiten, können Sie problemlos Übergänge über @media Umschaltknips deaktivieren.

Das sind nur meine zwei Cent. Ich habe nicht viel mit Übergängen selbst gespielt, aber um es zusammenzufassen: Ich würde mich eher auf Übergänge spezialisieren, aber weh tun, um sie universell anzuwenden solange Sie wissen, was Sie tun.

Natürlich können Sie die Übergänge für bestimmte Elemente jederzeit deaktivieren, indem Sie eine neue Regel mit dem von Ihnen verwendeten Selektor erstellen und ihm transition-property: none geben.

Answer 2

Sie müssen den gesamten Übergang deaktivieren, wenn Sie den automatischen Test ausführen. Die Deaktivierung des Übergangs wird Ihnen helfen, indem Sie BrowserDriver.wait() stoppen. Und Läufe werden schneller!