Przejścia CSS3: Czy „przejście: wszystko” jest wolniejsze niż „przejście: x”?

82

Mam pytanie dotyczące szybkości renderowania dla właściwości przejścia css3.

Załóżmy, że mam kilka elementów:

div, span, a {transition: all}

div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

O wiele bardziej efektywne jest kierowanie wszystkich przejść dla wszystkich tych elementów przy użyciu jednej deklaracji div, span, a {transition: all}. Ale moje pytanie brzmi: czy byłoby „szybsze” pod względem płynności i szybkości renderowania animacji, aby osiągnąć specyficzną właściwość przejścia każdego elementu? Na przykład:

div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}

div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}

Moja logika polegająca na zadawaniu tego pytania jest taka, że ​​jeśli "silnik" css musi szukać "wszystkich" właściwości przejścia, nawet jeśli istnieje tylko jedna właściwość dla elementu, może to spowolnić działanie.

Czy ktoś wie, czy tak jest? Dzięki!

HandiworkNYC.com
źródło
1
To zawsze była moja teoria, ale nigdy nie zauważyłem żadnej różnicy w praktyce.
ThinkingStiff
3
Spodziewałbym się, że faktyczne wykonanie animacji na ekranie byłoby dużo, dużo droższe niż parsowanie CSS. O ile nie nadużywasz systemu, nie martwiłbym się tym zbytnio.
StilesCrisis,
Myślę, że jeśli ISTNIEJE różnica, będzie to wyrażona w milisekundach - ale chcę wiedzieć, czy jest nawet minutowa różnica. dzięki za komentarze
HandiworkNYC.com
1
To krzyczy do mnie „szczegóły implementacji specyficzne dla dostawcy” ...
BoltClock

Odpowiedzi:

73

Tak, używanie transition: allmoże powodować poważne wady wydajności. Może istnieć wiele przypadków, w których przeglądarka będzie wyglądać, jeśli będzie musiała dokonać przejścia, nawet jeśli użytkownik go nie zobaczy, na przykład zmiany koloru, zmiany wymiarów itp.

Najprostszy przykład, jaki przychodzi mi do głowy, to: http://dabblet.com/gist/1657661 - spróbuj zmienić poziom powiększenia lub rozmiar czcionki, a zobaczysz, że wszystko staje się animowane. Oczywiście nie może być wiele takich interakcji użytkownika, ale mogą wystąpić pewne zmiany w interfejsie, które mogą spowodować ponowne wlanie i ponowne malowanie w niektórych blokach, co może nakłonić przeglądarkę do podjęcia próby animacji tych zmian.

Dlatego ogólnie zaleca się, aby nie używać transition: alli zamiast tego używać bezpośrednich przejść.

Jest kilka innych rzeczy, które mogą się nie udać z allprzejściami, na przykład animacja przy ładowaniu strony, w przypadku której najpierw renderowałoby początkowe style bloków, a następnie stosował je w animacji. W wielu przypadkach nie byłoby to coś, czego chcesz :)

kizu
źródło
link jest martwy, chciałbym zobaczyć twój przykład
MMachinegun
Naprawiono link do całego dabbleta
kizu
Chciałbym też zobaczyć przykład. Może już nie istnieje?
Drazzah
11
To nie jest tak naprawdę odpowiedź na pierwotne pytanie. Tak, możesz przypadkowo przenieść rzeczy, których nie zamierzałeś animować, ale OP pytał, czy reguła „wszystko” sama powoduje jakiekolwiek uderzenie w wydajność, zakładając, że żadne niezamierzone przejścia nie zostały wyzwolone.
Owen Masback
30

Używałem allw przypadkach, w których potrzebowałem animować więcej niż jedną regułę. Na przykład, gdybym chciał zmienić color& background-coloron :hover.

Okazuje się jednak, że możesz kierować reklamy na więcej niż jedną regułę dla przejść, więc nigdy nie musisz uciekać się do tego allustawienia.

.nav a {
  transition: color .2s, text-shadow .2s;
}
Duncan Mckenna
źródło