Angular: Dynamiczne klasy CSS i animacje

Angular 10+

0:00Jak już weszłam kolarze możemy dynamicznie ustawiać wartości różnych stylów.

0:04Możemy także tutaj przypisać sobie jednostki i takie dynamiczne całkowicie

0:09ustawianie wartości czyli nie zawsze ma sens.

0:13Tutaj np.

0:13w przypadku e-maila my zmieniamy zawsze na dwie wartości albo red.

0:17Albo Green albo red.

0:19Więc tworzenie tego stylu zupełnie od zera niekoniecznie ma sens.

0:24Jeśli masz kilka wartości

0:26to zamiast dodawać tutaj sterowanie lub nawet kilka niepotrzebnych

0:29polowań które zmieniają się tylko w trzech czterech kilku wariantach.

0:33Do tego powinniśmy użyć klasy

0:35ponieważ komponent oprócz HTML posiada tutaj plik CSS lub style które są

0:41umieszczone od razu bezpośrednio w komponenty.

0:43Ten plik walką komponent CSS tutaj otworze

0:47tutaj mam jakieś wcześniejsze klasy do sterowania na sztywno.

0:51Ale tam sobie jakieś nowe dwie klasy do studiowania na dynamicznie.

0:55Czyli będzie to powiedzmy płot który jest

0:59Walid może nawet tak i na nim płot który dodatkowo ma klasę walić.

1:05Czyli poprawny i inny impuls który dodatkowo ma klasę

1:09inwalidów czy niepoprawnie i tą wartość którą tu stawiałem czyli

1:14Border bo to kolor zamiast robić to stylem możemy zrobić to w ten sposób.

1:19Ta ustawa jeśli jest Walid to Green.

1:23Jeśli jest inwalidą to OK.

1:28Teraz chciałbym dynamicznie zależnie od

1:30tego warunku dodać klasę Walid albo inwalidą.

1:34I teraz tak tutaj po prostu słówko las to uwaga bo nie ma czegoś takiego.

1:40Mianowicie jeśli zobaczymy nasz kod Ja

1:43chciałbym tutaj do jakiegoś elementu przecież klasy Class to jest to the fight.

1:50Nie ma czegoś takiego jak klas muszę użyć klasy list i dynamicznie.

1:56A.D. Romów itd.

1:59Na szczęście nam pomaga i dodaje swoje własne pole czas

2:06i ja mógł ustawić tutaj warunek jest poprawny to chcemy dodać klasę liter.

2:14Jeśli inwalida.

2:18Tą klasę inwalida którą umieszczamy tutaj

2:21czyli możemy tutaj zajrzeć tego warunku różne klasy sobie dodać.

2:25Zobaczmy jak tam zadziała.

2:27Jest tu ładnie zielono widzimy klasę Walid

2:30Jeśli wpisze trzy literki jest Walid czy już pomyliłem klasę.

2:35Jeśli to jest tak mniejsze niż 3 to chcę inwalida.

2:40Jeśli większe to.

2:41Czy można to w ten sposób zrobić.

2:44Tutaj wartość klasy się zmieniała.

2:46Co jest fajne to to samo może być też

2:48troszkę inaczej mogę powiedzieć tak że jeśli klasa ma być Walid powiedzmy jeśli.

2:59Jest większe równy 3 natomiast jeśli nie jest zwrotny warunek.

3:12Mniejsza od 3 czy dwa sposoby.

3:14Możesz pozostawić klas warunek i dopisać sobie klasy których potrzebujesz.

3:21Możesz też zrobić klasę. Kropka.

3:26Nazwa klasy równa się warunek i w ten sposób możesz ustawić ileś różnych klas

3:31i każdej przypisać odpowiedni warunek jest to czytelnie jeszcze myślę.

3:36Jest to łatwiejsze bo prawa strona musi być równa iż jest to klasa zbędna.

3:41Jeśli jest w Polsce usunięta zobaczymy jeszcze tylko czy to działa.

3:45Jest czerwony inwalida 2 3 zmienia się Walid jest zielony

3:50czyli tak samo jak klasy pozwala dodawać i usuwać.

3:53Tak tutaj właśnie klas kropka Walid dodaje

3:56i usuwa automatycznie zależnie od tego jaka jest wartość tej części po prawej.

4:02Co jest tu jeszcze bardzo fajne

4:04to to że ta klasa która tutaj już jest zdefiniowana ona nam nie znika.

4:08Czy dodatkowe czasami nie wpisują całego

4:10słówka Class tylko właśnie dodają ją tylko klasy.

4:13Ta część pozostaje bez zmian.

4:15Czy nie ma już wszystkich klas budować

4:17będą jeszcze tylko te które są dynamicznie które mają się zmieniać pojawiać znikać.

4:22Natomiast te klasy które zawsze noszę takie jakieś CSS owe stylistyczne klasy

4:26które tylko od wyglądu odpowiadają one mogą tam zostać

4:29i to połączenie klas pozwala nam na bardzo fajny efekt nie tylko wygląd i

4:35zachowanie ale możemy użyć tego do animacji

4:39ja przygotowałem sobie dwie takie klasy pierwsze kopiuje żeby już nie pisać.

4:45Mamy pierwszą klasę która nazywa się

4:47Litwin i drugą klasę która razem z tą klasą

4:51powinny zadziałać tutaj i zrobić nam transformację.

4:55Czyli na początku chciałam żeby element

4:57miał wysokość zero i ustawa żeby powiedzmy wysokość trans 1 opaski czy powiedzmy może

5:05wszystkie pola mają się w pół sekundy animowanych.

5:09W ten sposób na początku jest to wysokość zero widoczność zero.

5:14Włączam animację i jeden element zobaczę

5:17Baczyńskiego przesyłane do góry a minus 200 pikseli w CSS.

5:20I ten efekt pracy jest niewidoczny jest odsunięty.

5:24Nie ma go tam gdzie powinien być.

5:26I te klasy z ligi dodam do tego drzewa.

5:31W ten sposób i nie muszę robić Hidden bo on już jest usunięty.

5:38Czy sama klasa sprawi że ten element jest

5:39niewidoczny i teraz w odpowiednim momencie chciał oddać tą klasę animator.

5:46A może po prostu lepszy animator. Wiesz o co chodzi.

5:51Jest to klasa w którym ja sobie sam wymyśliłem i robimy tak.

5:57Klas.

5:59Nazwa klasy a limited.

6:03Kiedy ma być aktywna jeśli subskrypcji sukces.

6:08Czy jeśli skończy sens zmieńcie z FOZZ u

6:11to do tej przygotowanej animacji dodajemy coś takiego.

6:14Wysokość auto widoczność 1 i pozycja 0 i zobaczmy jak to zadziała.

6:23Bob.

6:29Jak to się ładnie zmienia.

6:31Czy chciałbyś już.

6:33Tak w piśmie my musimy wpisać tak przynajmniej trzy znaki.

6:38Kliknij tutaj i widzisz pięknie nam to wjeżdża.

6:43Ok czyli skoro nam to zadziałało bardzo

6:46ładnie dla tego ostatniego elementu spróbuję to samo zastosować dla

6:49pozostałych czyli wszędzie działa na Hidden czy element znika i tyle.

6:54Dodam klasę tą która przygotuje animacje.

6:56Dodam tu drugą klasę animator.

7:00I zmieni się tylko warunek tylko moment

7:03flaga tutaj w naszym kodzie JavaScript która decyduje kiedy.

7:08Czyli tak Hidden.

7:11Zobacz sobie ten wspólny element Control D

7:14znajdę sobie kolejne elementy w tym to że ten początek kuleje tak

7:19czy jak widzisz ten początek jest taki sam dla wszystkich tych bloków

7:23różni się tylko warunek krąg animacji tutaj czyli nasza zmienna którą stworzyłem

7:28i sama zmiana zmiennej Doda klasę co spowoduje dodanie animacji

7:33usunięcie zmiennej z powrotem animowane w drugą stronę

7:37Zaraz zobaczymy jak to zadziała jeszcze tylko może na końcu jak mamy

7:41subskrypcję to może schowa też nasz łatka message.

7:45Szukam też może schowane

7:51ok nie zobaczmy jak się teraz zachowa odświeżone.

7:57łucja.

8:07OK. Bo chciał się zapisać na teren

8:11tak jak widzisz to ładnie biało czyli też animacja w drugą stronę działa.

8:16Podaj e-mail test.

8:17Małpa test świeci na zielono.

8:20Kliknij tutaj.

8:21To wszystko zniknie wiedzie nam to czy możesz nie tylko zmieniać tekst może

8:26zmieniać wartości pokazywać chować elementy możesz skrócił styl i klasę.

8:31Możesz także dodać bardzo fajne animowane.

8:34Efekt jest nie tylko podstawowe informacje.

8:36Możesz też kontrolować dowolne własności

8:40HTML CSS a może ułożyć po prostu Java skryptów i zmiennych Angola.

8:45Wszystkie tutaj zmiany sam wprowadza tylko o tym musisz pamiętać że musi to odbyć się

8:52na jakiś event jakaś interakcja z użytkownikiem

8:56lub time out lub po prostu coś co wykryje jeśli masz w ten sposób np.

9:03kotwicę.

9:03Jak pamiętasz ten moment kiedy on wiernie wędruje.

9:06Wiesz już jak ten problem rozwiązać. Ok.

9:10To tyle jeśli chodzi o szablony w

9:12kolejnych lekcjach to zobaczymy co jeszcze możemy zrobić z komponentu ami.

9:16I jak możemy budować troszeczkę bardziej

9:18złożone rozbudowane przykłady niż jeden komponent błagam.