CSS: Will change

0:00Część w tej lekcji opowiem o World Change

0:02czyli takim hicie po rajdzie dla przeglądarki kiedy

0:06dane elementy mają dostać więcej zasobów aby zostać animowane.

0:10Tutaj mam taką animację którą celowo zrobiłem na dosyć mało wydajną i docelowo

0:17to kółko będzie miało rozmiary 100 na 100 gramów.

0:21Domyślnie ma 6 na.

0:23No i Borderlands jest równy połowie tych wartości.

0:27I to się dzieje na Hoovera czyli jeżeli

0:29jedziemy na ten element no to widzimy że ta animacja troszkę się przecina no i

0:34jeżeli z niego jedziemy to ona wróci do tej początkowej wartości.

0:38Generalnie oczywiście można to zrobić lepiej ja nie polecam w ogóle animowana

0:42rzeczy takich jak Hyde czy Borderlands już Borderlands może czasami trzeba ale jeżeli

0:47jest opcja tego uniknąć na przykład za pomocą Transformers trans latte czy

0:53Transformers Krall No to jak najbardziej powinniśmy korzystać z tych właściwości.

0:58Ale jeśli mamy sytuację że faktycznie jesteśmy na wolnym urządzeniu i te

1:01animacje muszą być takie ja tutaj sobie spowolni w zakładce performance.

1:05Nasz zespół co prawda to prawdopodobnie

1:08nie zmieni wydajności tej animacji ponieważ animacje CSS owe z reguły są

1:13robione na GPW natomiast wydaje mi się że czasami może to troszkę przeskoczyć.

1:19No i to co robi na to pozwala nam

1:22powiedzieć przeglądarce które właściwości będą się zmieniały w najbliższym czasie.

1:27Czyli jeśli piszemy hejt czy Porter Darius

1:31no to wskazujemy widzowi że te właściwości w najbliższym czasie będą się zmieniały.

1:36Co to oznacza. Oznacza to że nie możemy tej właściwości

1:40podawać bo wtedy to zawsze będzie starało się przekierować zasoby dla tych

1:45właściwości dla tego konkretnego elementu serce.

1:49A jak wiemy jeśli wszystko

1:51ma dodatkowe zasoby to tak naprawdę nic z tych dodatkowych zasobów nie ma.

1:55Staramy się przyśpieszyć wszystko i kończy

1:58się nam pamięć czy kończy się nam zasób na GPW czy na GPW.

2:03W związku z czym powinno być używane bardziej programowo tzn.

2:08Np.

2:08przy pomocy skryptu możemy ustawić za pomocą skryptu wylicza.

2:14W momencie kiedy wiemy że animacja za

2:16chwilę się wykona i po tym jak ona się wykona ustawić walczyć na nowo.

2:21Czyli jeśli sobie ustawiamy

2:23na taką wartość PO.

2:27Jakimś Action pojęcie który faktycznie uruchamia

2:30no to możemy.

2:32Później tą animację wyłączyć za pomocą

2:35will change on czy and set w zależności od potrzeby możemy dać jej

2:42różne właściwości ale tego nie powinniśmy pisać w samym cs.

2:46W związku z czym

2:48generalnie musiałem tutaj o tym wspomnieć bo jest naprawdę potrzebną sytuacją

2:54zwłaszcza jeżeli te właściwości

2:57które nie czujemy już faktycznie nam są no to wtedy jest faktycznie dobrym

3:01rozwiązaniem ale nie powinniśmy używać go do tzw.

3:05przedwczesnych optymalizacji czyli jeżeli

3:08wydaje nam się że coś tutaj może kiedyś no to wtedy nie dajemy no bo jeżeli

3:14nam się wydaje to znaczy że nie jesteśmy pewni jeżeli

3:18widzimy że na danym urządzeniu animacja wygląda źle wtedy możemy dać milczenia i

3:23to tylko w tym momencie kiedy ta animacja się wywołuje.

3:26Powinniśmy zdjąć tak szybko jak ta

3:29animacja się skończy no i tutaj ja polecam generalnie to źródło.

3:35Jest cała lista opcji jakie możemy tutaj podać np.

3:40skroplony z szyn auto czy pojedyncze właściwości CSS.

3:45No i nie powinniśmy tego łączenia

3:47aplikować do zbyt wielu elementów tak jak wspomniałem tutaj MdM też to podkreśla.

3:52Powinniśmy używać tego.

3:55Tylko kiedy jest potrzebne czyli włączać i wyłączać dynamicznie za pomocą skryptu.

4:02Nie korzystać z wyliczeń CBA jeżeli

4:04faktycznie nie ma żadnego problemu z performance na stronie.

4:08No i generalnie elementy złącza mogą

4:11wyglądać troszkę inaczej ale jeżeli faktycznie mamy już problem z performance

4:15em no to tak czy siak myślę że tutaj bardziej pomoże niż zaszkodzi.

4:22W związku z czym warto dodać że jest taka właściwość CSS.

4:27Czy korzystać tworząc zwykłe jachty ze zwykłą animacją np.

4:32na Transformer skale zamiast takich właściwości generalnie.

4:37Hit czy Left Right nie powinniśmy animowanych bezpośrednio są do tego inne

4:42właściwości takie jak Transformer trans lat czy jeżeli

4:46chcielibyśmy żeby ten element był troszkę wydajniejsze no to możemy tutaj zamiast

4:51kremów zrobić po prostu sytuację taką że ustalimy sobie Transformer.

4:58Skala 0 1 przepraszam bo 0 to generalnie

5:02nie będzie już widać tego elementu możemy zaprezentować.

5:08Transformers 0 3 nie zmniejszył tego elementu do zera

5:14a zmniejszył tylko trochę wyłączył odświeżenie jeszcze raz takie że

5:19jest zero no to wskazujemy go do zera czyli element niewidzialny.

5:23Jeżeli jest jeden to to jest jego domyślną wartość ale jak np.

5:26tutaj piszemy powiedzmy 100.

5:29Czyli będzie 100 razy większy element

5:31to faktycznie mamy tutaj całe niebieskie kółko i to możemy sobie zrobić na rowerze.

5:36Czyli domyślnie jest jedynka wtedy

5:38tranzytowym Properties to jest tylko i wyłącznie transport w którym możemy

5:43robić naprawdę dużo rzeczy już bez żadnego problemu.

5:46No i ta animacja powinna być o wiele mniejsza niż była.

5:50Może zróbmy ją 10 razy większą niż 100.

5:53I faktycznie widać że jest to troszkę lepsze

5:57i nie ma tutaj żadnych problemów z anty leasingiem.

6:00Może przy samym skanowania czasami to

6:02wyglądać gorzej ale będzie o wiele wydajniejsze w kontekście GPW

6:07i generalnie tego jak CSS będzie na całej stronie zreformował.