Angular: Animacje i Dyrektywy behawioralne

Angular 10+

0:00Nasza strona portfolio jak dotąd jest taka dość statyczne.

0:04Są tu jakieś ruchome elementy aczkolwiek chcielibyśmy tutaj dodać troszeczkę więcej

0:09życia troszkę więcej modyfikacji do możliwie nawet jakiejś animacji.

0:14Tutaj pozwalam sobie stworzyć kilka takich

0:15przykładowych transformacji Slide UP Left Ride i dodamy gdzieś do

0:21kilku elementów takie specjalne klasy Slide Left Ride.

0:25Jeśli do tej klasy dołączy jeszcze klasę

0:29animator no to taki element powinien na przykład tutaj wjechać z jednej strony

0:34lub na przykład tutaj dodam klasę inną to się pojawi.

0:39Z drugiej strony jak użytkownik wejść na

0:41stronę typu kilometrową musi rozwinąć takie kafelki wjechać nam w poszczególnych

0:46miejscach i to jest taki mały problem że przy odpowiednim miejscu i momencie

0:51tą klasę dodać że animacje się wykonała po prostu mniejsze klasy.

0:57No tutaj nic się nie dzieje odświeża stronę ta sama jest martwa.

1:00Musimy znaleźć jakiś sposób żeby do tych

1:03wszystkich elementów oprócz naszej klasy CSS żebyśmy także mogli dodać

1:08no właśnie jakąś informację jakiś ten moment kiedy klasa się dodaje.

1:13Mam kilka możliwości moglibyśmy po prostu na przykład w komplecie Home komponentu

1:19jakieś Time Out Interview tej klasy dodawać.

1:23Aczkolwiek no to znowu w tym naszym komponentu robi się coraz większy bałagan.

1:28Home już zawiera różne różne dane różne rzeczy.

1:31Pytanie Czy ja mógłbym to logikę przypiąć bezpośrednio tutaj do tych elementów.

1:37Ta za każdym razem kiedy jakieś zachowanie

1:39wygląd logikę chcesz po prostu móc dodawać przykleja może powiedzieć do

1:43poszczególnych elementów no to w takim przypadku potrzebujemy dyrektywy.

1:49Otworzy więc nowy Terminal Server oraz uruchomione w drugim

1:53dodatkowym terminalu wygeneruje dyrektywę

1:58czyli powiedzmy było Slide In dyrektywa ANSI engine rate w skrócie g

2:06d jak dyrektywa i powiedzmy stworzy specjalny katalog

2:12na dyrektywy i utworzy dyrektywę powiedzmy Slide i żeby pozwalała nam wjeżdżać

2:19elementom na stronę albo skonfigurować powiedzieć czy z lewej czy

2:24prawej czy z dołu powiedzieć kiedy ten element ma nam się pojawić kiedy mamy

2:28wjechać na stronę czyli zobaczymy slide in direct.

2:32Otworzy sobie spokój taką dyrektywę i jak widzisz jest to bardzo podobne do

2:36komponentu mamy też klasę mamy też u góry tutaj jakieś Dekoral tor tylko zamiast

2:41komponent mamy Direct mamy lektora i co istotne nie mamy ani

2:46Temple ani jest CSS czyli mamy tylko możliwość przy 5 dyrektywy do już

2:53istniejących elementów ona nie wygeneruje szablonu ona nie posiada swojego HTML a

2:57dyrektywa to jest coś co możemy przypiąć podłączyć do już istniejącego HTML

3:02tez jak taką dyrektywę uruchomić jak wszystkie powiedzmy konsolowe.

3:08Carlos Slim Interactive zrobią podpiąć tak samo komponenty.

3:13Po prostu musimy gdzieś dopasować nas

3:15elektor czy w tym przypadku zobaczymy dokumentację kwadratowe na wjazd oznaczają

3:20sektor atrybutów czyli musi gdzieś w HTML u nas w aplikacji znaleźć się taki atrybut

3:25żeby ta dyrektywa utworzona czyli powiedzmy animacja robić w tym miejscu

3:30dodam dodatkowy atrybut AP Slide In zobaczmy w przeglądarce konsolę

3:39i po ładowaniu strony mamy Hello Slide Interactive.

3:44Teraz jeśli będziesz mieć dodatkowo taki

3:47jeszcze element czy powiedzmy Apps Live in.

3:51Powiedz mi jeszcze o umieszczeniu w innym

3:53miejscu umieszczonego na przykład tutaj na tym elemencie p.

3:58Zobaczysz dlaczego.

4:02Odświeża stronę mamy 1.

4:05Hello slide in direct LIVE.

4:08Ale się Anglii.

4:09Utworzyć dodatkowy akapit to ten akapit razem ze sobą.

4:13Tam utworzy dyrektywę Halo SLA Interactive i tak samo nie tylko możemy przechwycić

4:19tworzenie dyrektyw a te same komponenty możemy stworzyć Andrzej.

4:24Nid.

4:25I możemy stworzyć będzie on wystroju

4:30czyli nie tylko mogę się przywitać ale możemy się także pożegnać

4:36czyli Chile ja będę mógł stworzyć zniszczy się rozwinąć

4:44i zwinąć to z każdym stworzeniem elementu w którym jesteś lektor z pasją są

4:49dyrektywą utworzy dyrektywę jeśli zamknie bloku wspólnego ang.

4:54Life będzie formą gwiazdką tabletem.

4:57No to mamy BB.

4:58Dyrektywa jest przecież elegancko tworzona i niszczona wraz z komponentu ami które

5:02zabierają gdzieś odpowiedni atrybut odpowiedni lektor CSS.

5:07I teraz pojawia się pytanie jak możemy

5:10faktycznie tę dyrektywę która się pojawia i jest niszczona.

5:14Elementem jaki możemy wykorzystać właśnie żeby ona kontrolowała te elementy a ona

5:19mogła zmodyfikować element do któregoś z przyjęta to najgorszy sposób żeby coś

5:24dostęp do tego elementu to jest coś takiego jak powiedzmy element.

5:31I będzie to element ref.

5:34Czyli tak jak poprzednio łapie referencje do elementu a teraz nie

5:39muszę go wyszukiwać gdzieś w szablon HTML bo jesteśmy od razu w miejscu którym

5:44potrzeba oponentów konstruktorzy konstruując dyrektywę od razu po pierwsze

5:48referencje do elementu na którym ta dyrektywa zamontowana.

5:51Nie trzeba tego elementu szukać.

5:53No i mogą teraz powiedzieć powiedzmy indeks LM Native element który nie

6:00podpowie za bardzo mam go typować HTML element.

6:07W ten sposób ok i powiedzmy

6:11klasy czyli klas list powiedzmy dodać klasę naszą klasę animator

6:18i zrobić to może nie od razu byś poprzez set Time Out żeby to się pojawiło.

6:27Powiedzmy sekundę po ładowaniu strony i zobaczymy teraz jak to nam zadziała.

6:34Odświeżania strony

6:36jak widzisz dyrektywa będzie pod pięcie czeka sekundę i dodaj klasę która animacja

6:42i element po otworzeniu strony ładnie nam wjeżdża co mi się nie do końca podoba.

6:48No to to bezpośrednie manipulowanie dą.

6:51Ja bezpośrednio wprowadzą zmiany nie czekając na

6:55te zmiany stają się bezpośrednio wprowadzane natychmiast one nie czekają na

6:59cykl wykrywania zmian i są też synchronizacji.

7:02Zresztą zmian i takie ręczne manipulowanie tutaj i nie ręczne automatyczne wykrywanie

7:07zmian tutaj muszę powiedzieć dziwnych efektów że coś zmienimy.

7:10Z jednej strony my okulary i nie wiadomo jaki będzie efekt.

7:14Dlatego chciałbym tutaj faktycznie wykorzystać nie ręczne manipulowanie tylko

7:18cały czas dalej trzymać się wykrywania zmian i pozwolić aktorowi robić swoje

7:23czyli właśnie wędrować HTML więc robią to w ten sposób.

7:27Tutaj ja tylko zmienię zmienną czyli

7:30animator postawi na tron i chciałbym żeby ta zmienna jesienna się zmieni żeby przy

7:36zmianie tej zmiennej a łukasz sam dodał lub późną klasę lub jakieś style itd.

7:41Tak jak to robimy ja utworze tą zmienną

7:43animację tutaj w tym miejscu ona na początku może być ustawiona na FOZZ.

7:49I teraz jeśli tą zmienną wystawić do góry

7:52czyli pójdziemy już musiał to wcześniej robić dynamicznie to musiał oznaczać.

7:58Nazwę klasy animator

8:01i tutaj przypisać naszą zmienną powiedzmy Animator jeśli miałoby to taka dodała.

8:08Ta sprawa jest taki że chce cały mechanizm

8:11całe kombinowanie i go w HTML w tym miejscu za każdym razem kopiuj wklej.

8:15Chciałbym to schować do środka do wnętrza tego obiektu.

8:20A może to tutaj.

8:22Czy mogę definiować życie jako host i mogę powiedzieć że klasy animator.

8:29W ten sposób ma wskazywać na zmienną animator jest to jeden sposób.

8:37Zobaczmy.

8:39Odświeżoną stronę.

8:43I po sekundzie nam to wjeżdża tylko u góry w dokumentacji w tym

8:48naszych meta danych dyrektywę musiał szukać sprawdzać które jest które

8:53tego chcemy zdefiniować to w tym miejscu jest też opcja.

8:56Ja mogę bezpośrednio oznaczyć że ta

8:59zmienna ma wskazywać na budowanie wiązanie do Horsta.

9:05I tu już mogę pominąć kwadratowy nawias bo to już jest budowanie.

9:08Po prostu piszę do czego chce zbudować to

9:11nie musi być klasa ja mu w ten sposób zbudować np.

9:13Style do jakichś wartości boimy się przejść np.

9:18IT Hidden i każdy inny dowolny atrybut wszystko co mogliśmy.

9:23W nawiasach kwadratowych przekazać.

9:25Ja mówię teraz od środka jakby magiczne z wnętrza ustawić różne

9:30własności tych elementów ja tu zostanę przy animator

9:35i Zobaczymy teraz jak to zadziała żeby nie było działa tak.

9:41Czyli mogę odświeżyć.

9:43Klasa się Doda i tym razem robimy to zgodnie z Dobrymi Praktykami jaguara.

9:47My zmieniamy tutaj zmienną a solar po wykrywaniu zmian

9:52sprawdza te wszystkie wiązania i wprowadza zmiany za nas automatycznie.

9:57Czyli teraz ta dyrektywa za każdym razem robi właściwie to samo.

10:03Tak bo na zawsze ładne animacje pytanie

10:04czy możemy jej przekazać jakieś opcje jakąś konfigurację.

10:07Chciałbym żeby ten tysiąc tutaj żeby on był tylko polem w naszej klasie

10:14które nazwę sobie może w ten sposób i tak samo jak

10:18komponenty mogą od rodzica od nadrzędnego komponentu dostać jakieś informacje.

10:23Tak samo dyrektywa tak samo poprzez import.

10:26Dokładnie w ten sam sposób możemy się ustawić dalej.

10:30Czyli mogę np. sobie tutaj wstawić Gila i podpowiada mi

10:35i powiedzmy na troszeczkę dłuższy na dwie sekundy

10:41dwie sekundy zrobię w tym miejscu a z tej strony powiedzmy w tej drugiej kolumnie.

10:50Musisz pamiętać o dyrektywie.

10:52Sam widzisz nie działa może lecz dyrektywę i ustaw powiedzmy 3 sekundy.

10:58I teraz to jeszcze nie zadziała dlatego że musimy pamiętać ciągle o tym 1 Left nas.

11:04Robimy dyrektywę to warto żeby była już miała w sobie wszystkie potrzebne rzeczy

11:08żeby użytkownik nie musiał jeszcze gdzieś jakieś dodatkowe rzeczy dodawać więc za tą

11:12dyrektywę Slim Left jeszcze także tutaj czyli powiedzmy ustawę sobie tutaj coś

11:17takiego jeszcze Direction narazi go na celu.

11:23I tu zrobie host Building i będzie to znowu klasa.

11:27Czy można to kilka razy zrobić i pluton klasy A jak Pamiętasz te czasy ustawiać

11:34także w ten sposób więc próbują może czy działa to tak czy mogę dynamicznie klasę

11:39ustawić po prostu w ten sposób nie tylko jako

11:43i tak czy nie ale także zmienić rodzaj klasy zmienić którą kierunek np.

11:48będziemy chcieli żeby to nam się przesuwał.

11:50Sprawdźmy odświeżyć stronę i jak widzisz oba elementy nie mówią

11:57obawiały z jednej strony ale coś jest nie tak obawiało w tym samym

12:01czasie albo po sekundzie dlaczego jak widzisz ja mam od 40 lat.

12:06Konstruktorzy konstruktorzy.

12:08On ma dopiero oryginalną wartość bo nasz dyrektywa nasz komponent dopiero utworzył.

12:14On jeszcze nie miał czasu

12:16podpiąć się zainteresować się i pobrać tych danych od rodzica.

12:20Jeśli chcesz korzystać właśnie z impulsów

12:22to musisz ten kod nie wykonać go w końcu ktoś to za wcześnie.

12:26Tych danych tam jeszcze nie ma.

12:28Musimy poczekać na inicjatywę.

12:30Musimy poczekać aż komponent dyrektywa utworzona ale jak już tam na pewno

12:35przyjęta we właściwe miejsce i posiada dostęp do tych wszystkich danych.

12:39Spróbujmy zobaczyć to jeszcze raz.

12:45Jak widzisz teraz ja to lepiej

12:47bierze pierwszy element po sekundzie wjeżdża drugi.

12:50Czy mamy kontrolę nad tym czasem opóźnieniem kiedy ma to wjeżdżać.

12:55A teraz zwróć uwagę że nasza tutaj

12:59nasz kierunek możemy teraz ustawić czy Left lub Right czyli np.

13:06równie dobrze mógł tutaj kupisz

13:08hospicyjnej zrobić tak także import i dodaje Są jakieś pole tylko jakoś

13:13stworzy kolejne pole no to wtedy znowu to samo co dodawanie dyrektywy tak.

13:19Przecież to dwa razy więc mógłbym jasne stworzyć tutaj impuls nadwyżkę direction.

13:24Może w ten sposób i dodatkowo dodać Direction podać nazwę

13:30klasy ale co jest fajne to to że ja mogę jako import wykorzystać

13:37także sam atrybut całą nazwę naszej dyrektywy i wtedy nie muszę mieć

13:41dodatkowych atrybutów tylko sam ABS Litwin staje się już de facto atrybutem.

13:49Co ja tu przekażę wiedziałem to jako

13:53dyrektor i będzie automatycznie jako klasa.

13:56Czyli robimy Slide In Slayer Left może samo left by wystarczyło.

14:01Więc ja spróbuję tutaj może jeszcze troszeczkę zmodyfikować CSS.

14:05Zobaczymy.

14:07Staples sam kierunek wystarczy że podamy np.

14:12nawet z małej litery podamy sam kierunek

14:17jako parametr tu to będą w ten sposób.

14:22I to będzie i kropka.

14:24AP też z małej.

14:25Czy jak widzisz dodajmy zawsze klasę slide.

14:28Dodajmy klasę tu jest parametrem z kierunkiem który chcemy uzyskać.

14:34Jeśli dobrze pomyślimy o tym jak poukładać

14:36właśnie tę klasę CSS i dyrektywy to może być bardzo fajny

14:42mechanizm komponowania różnych różnego rodzaju animacji i różnych kierunków

14:46różnych sposobów pokazywania tych elementów.

14:50Połączymy to z dyrektywą czyli teraz mogę po prostu Apps Latin

14:55będzie zawsze dodawał tę klasę ale nasz host Ding będzie tylko dodawać np.

15:00kierunek Left tutaj będę mógł przekazać tylko raz zwrócił uwagę że nie dodaję

15:05nawiasach kwadratowych dlatego że nie jest to zmienna.

15:09To jest tekst.

15:10Moglibyśmy oczywiście tutaj użyć zmiennej w nawiasach kwadratowych.

15:16Przekazujemy zawsze ten sam tekst.

15:18No to może mieć kwadratowe

15:20i teraz zobaczmy Jeszcze tutaj będzie to w takim razie domyślnie left.

15:25Ale w takim razie oprócz tego ja muszę jeszcze ustawić tutaj jedną klasę.

15:34Czyli Slide wyjaśnił tak zawsze będzie.

15:39Oprócz tego muszę niestety ustawić tutaj

15:42zmienną czyli powiedzmy to test jak to zadziała.

15:48Na starcie dodajemy klasę slide

15:51na podstawie parametru Impact ustalamy kierunek który się zamiana

15:56jest na klasę i po opóźnieniu dalej przekazem tutaj otrzymamy animację.

16:02Ten cały skomplikowany mechanizm dodawania

16:04usuwania klas animowana ich możemy schować elegancko w jednym parametr.

16:09Jeden parametr to zachowanie strony.

16:12I tutaj oczywiście musi być błąd.

16:15Dlatego już na starcie chcemy żeby ta

16:17klasa zawsze była natomiast ta druga żeby się pojawiała.

16:20Po opóźnieniu dobra Sprawdźmy jak to działa.

16:24Pierwsza powinna wejść po dwóch sekundach i druga.

16:27Z drugiej strony wjeżdża po trzech sekundach już mamy bardzo fajny mechanizm

16:32gdzie całe to wszystkie skomplikowane są schowane w środku.

16:35W tych wszystkich funkcjach i parametrach

16:38dla programisty dla nas później wystarczy że podamy jeden lub dwa parametry.

16:43To jest oczywiście domyślne.

16:46Podamy jeden lub dwa parametry

16:49i cały ten mechanizm animowana dodawania usuwania klas parametrów.

16:53To wszystko dzieje się za nas

16:55automatycznie więc jest to bardzo fajna rzecz jeśli chodzi właśnie o wielokrotne

17:00wprowadzenie tych samych zmian gdzieś w HTML u gdzieś na stronie.

17:04Co tu jeszcze warto byłoby pamiętać.

17:06Jeśli ustalamy jakiś temat internauty tego typu rzeczy to każda akcja może np.

17:13trwać dłużej niż życie tej dyrektywy więc zapraszamy rozpoczynamy jakiś proces.

17:19No to warto jest na przykład tutaj.

17:21To będzie Chandler.

17:26Warto zapamiętać uchwyt.

17:28Czy to jest kwestia serwera czy tez Time Out.

17:30Czy to jest jakikolwiek proces i

17:33jeśli rozpoczynamy coś to warto po sobie posprzątać.

17:37Czyli w razie gdyby komponent została zniszczona to klient Time Out Killer

17:42Interview jest Chandler po prostu wyczyścić anulować.

17:47żeby nie było w takiej sytuacji że dyrektywa już została usunięta ze strony a

17:51my jeszcze wykonujemy niepotrzebnie w środku jakieś tam tematy Interview ale

17:56jest to zła praktyka i może też prowadzić do np.

18:00wycieków pamięci lub różnych dziwnych błędów kiedy wykonuje się

18:03po tym jak komponent dyrektywa już dawno zostało usunięte ze strony ok.