Witamy spowrotem.
Więc kiedy pierwotnie wprowadziłem Jay queery Wspomniałem, że pomaga nam robić rzeczy takie jak wybieranie elementów manipulować nimi w detektorach zdarzeń.
I wspomniał również, że pomaga z efektów i animacji.
Więc w tym filmie mam zamiar zrobić szybki podgląd niektórych z tych wbudowanych efektów w szczególności mam zamiar pokazać dwie główne kategorie efektów blaknięcie efekty i slajdy.
Więc jestem w dokach Jay Corey tu w kategorii efektów.
Można tam zobaczyć sporo metod, które mają do czynienia z efektami i mam zamiar rozpocząć pokazując efekty zanikania więc mam zamiar przyjrzeć się wyciszeniem, aby rozpocząć.
Co Fadeout robi to wybrać element ze znakiem dolara lub zestaw elementów i wywołać które zanikają na nim i będzie animować tego elementu z pełnej nieprzejrzystości w dół do pełnej przejrzystości lub zerowej kryciem.
Więc w zasadzie zanika element na zewnątrz i można podać czas, jeśli ma to być powolne lub szybkie lub bardzo powoli.
Możesz podać liczbę milisekund.
Wartość domyślna wynosi 400 milisekund, a następnie można dostarczyć oddzwaniania do uruchomienia na końcu której pokażę za chwilę.
Więc mam zamiar zrobić nowy plik o wykazanie tego badania efektu demo, a ja po prostu skopiować naszej struktury z ostatniej stronie demo i ten wywoła skutki J Querrey.
Mamy więc, że w konfiguracji i mam zamiar pozbyć się wszystkich tych treści tutaj, a potem mam zamiar dodać kilka DIV.
Zróbmy trzy DIV i będziemy korzystać z tych div i blaknięcie je i ożywić je i przesuń je w górę iw dół.
I tak mam zamiar dać im jakąś zawartość wewnątrz tego pierwszego będą one nie znikają mi następnego.
Błagam cię proszę.
I wtedy wreszcie będziemy mieć jeden, który mówi Pomoc Pomoc.
Więc te DIV są zdesperowani, aby nie być zanikała.
Niestety dziś nie ich szczęśliwy dzień.
I będziemy walczyć je.
Więc lepiej o tym mam zamiar dodać w pewnym stylu, żeby nasze życie tak, że mają kolor, który możemy zobaczyć znikną.
I mają też szerokość i wysokość, które możemy zobaczyć w górę iw dół.
Więc mam zamiar wybrać wszystkie DIV i dać im z 100 pikseli i wysokości 100 pikseli i kolor tła turkusowy i niech zapisać, a my tego otworzyć.
Mamy trzy DIV.
Chciałbym jednak je lubię być na tej samej linii.
Tak więc jednym ze sposobów na to jest z lewej pływaka.
Teraz wszyscy są w tej samej linii, ale zlewają się ze sobą.
Więc to naprawić, że możemy dodać margines.
Więc po prostu zrobić margines 20 pikseli z każdej strony.
Teraz kończy się z trzech kwadratów, a każdy z nich ma jakiś tekst w środku i naprawdę nie trzeba przesadzać stylizacji je ponieważ wszyscy mamy zamiar zrobić, to wykazać, w jaki sposób możemy dopasować je i obecnie.
Więc mamy zamiar dodać przycisk do góry tutaj i ten przycisk będzie po prostu powiedzieć, kliknij mnie.
A kiedy kliknij ten przycisk, co się stanie, jest to, że nasze animacje będą działać.
Więc kliknij to i te trzy elementy powinny zanikanie zacząć.
Więc powtórzyć zanikanie odbędzie element z pełnym kryciem lub jakiegokolwiek krycie To obecnie i wyblakłe do momentu pełnej przejrzystości.
Tak wygląda to wybierz dot wyciszenia i możemy zapewnić opcjonalny ciąg prędkości tak wolno czy szybko, czy możemy dać mu kilka milisekund.
Więc pozwól mi pokazać, że teraz.
Jestem rzeczywiście zamiar zrobić to w oddzielnym pliku, więc zamierzam zrobić plik JavaScript i oszczędzać.
Zadzwonię wpływa po prostu geniuszem zapisać sejf, który miał mój alert podłączone i połączone ze sobą właściwie to dno.
Wystarczy dodać tag skryptu.
Źródło równa efekty.
Tak.
A jeśli mamy odświeżyć naszą podłączony alarm.
Więc to, co chcemy zrobić tutaj jest Faid te DIV zewnątrz.
Więc musimy wybrać urządzenie tak po prostu i nie zanikają.
A potem możemy zapewnić prędkość lub po prostu zostawić go w taki sposób.
A jeśli to wszystko chcemy zrobić lub odświeżyć i można zobaczyć, jak załadowaniu strony zaczną zanikać w górę.
Więc rzeczywiście sprawi, że stanie, gdy klikamy przycisk.
Więc będziemy chcieli zrobić przycisk znak dolara kropkę i możemy albo nie kliknąć lub zrobię kropkę na szybkie, a następnie przekazać do naszej funkcji zwrotnej.
Więc kiedy klikamy wtedy znikną wszystkie div ot tak, a teraz zostanie odświeżona i jeśli kliknę widać wszystkie one zanikają.
Tak jak już wspomniałem możemy podać numer tutaj coś jak 1000, które jest pełne sekundy.
A gdybym odświeżyć zobaczysz po kliknięciu trwa pełną sekundę dla nich zanikają.
Ważnym punktem jest to, że o fadeout gdybym sprawdzić stronę tutaj i patrzę na elementach DIV są nadal w zespole albo jeszcze w akademiku.
Po prostu nie widzę ich, bo ich wyświetlanie zostało ustawione na none.
Więc ich nie usuwać ani nie usuwa je ze strony.
To jest po prostu je ukrywa.
I to jest na pewno ważnym wyróżnieniem.
Więc powiedzmy, że chciałem po prostu wydrukować wiadomość po div znikła się więc chciałbym zanikać je i zrób coś takiego wyciszenia zakończona gdyż zaprzepaszczone dziennik.
A jeśli biegnę to będę otworzyć konsolę i obserwować kolejność rzeczy.
Więc kiedy kliknij tutaj mam Faid zakończone drogę przed blaknięcie jest faktycznie wykonywana.
Więc co się dzieje, jest to, że możemy zaznaczyć cały div i rozpoczynamy zanikanie ale ma pełną sekundę.
I JavaScript nie czeka na ten drugi, aby zakończyć zanim przechodzi do następnej linii.
Natychmiast ruszyliśmy na tej linii i drukuje Faid zakończone a potem zanikają wykończenia.
Więc jeśli chcemy Kod wydarzyć tuż po wyciszeniem wykończenia chcemy być gwarancją po możemy przekazać w zwrotnego tutaj.
A więc ta funkcja zwrotna zostanie wywołana wewnątrz wyciszenia się automatycznie, kiedy to zrobić.
Więc mam zamiar przenieść naszą stałą dziennik tam i oszczędzać.
A gdybym odświeżyć i teraz kliknij zanikanie wykończeń, a potem dostać 3 Fade zakończone dzienniki konsoli kropki dla każdego z nich.
Bardziej typowy scenariusz, a nie tylko drukowanie ciąg w Konsul jest rzeczywiście usunąć elementy raz my ich zanikać.
Więc mówiłem, że są one po prostu nie są one ukryte w rzeczywistości nie ma.
A jeśli chcemy usunąć je jak na naszej liście do zrobienia mamy zamiar budować, gdy klikniemy na kosza obok elementu, który chcemy go zanikać powoli zrobić miłą animacji.
Ale wtedy też po prostu usunąć poza stronę całkowicie wyłączyć DOM.
Więc musimy użyć metody nazywane usuń, a chcemy tylko, aby ją usunąć po zakończeniu wyciszenia.
Tak, że wygląda jak to będzie po prostu zrobić to usunięcie.
A co to będzie zrobić, to czekać aż do wyciszenia jest zakończona.
I dla każdego div będzie działać metody Remove na nim.
Więc odświeżyć i kliknij kliknij mnie.
Oni znikną, a następnie, jeśli podejdziemy do elementów można zobaczyć, że nasz organizm ma tylko przycisk teraz i tag wszystkie div są całkowicie zniknęły.
A gdybym skomentować tę linię i odśwież można zobaczyć, gdzie zaczną tu trzy div i kliknij na przycisk i wszystko, co się dzieje.
Oni znikną, a następnie wyświetlacz jest ustawiony na none.
Więc jeśli mogę umieścić mój kod w niewłaściwym miejscu i pobiegłem metody Remove tu zrobiłem wszystkie DIV dot usunąć tak po prostu.
Co właściwie stało się, że kolejność nie jest gwarantowana.
I to ma zamiar wziąć pełną sekundę.
A ten kod nie będzie czekać na ten drugi, aby zakończyć.
Tak rozpocznie się zanikanie, a następnie uruchomić usunąć natychmiast po.
Tak, że kończy się patrząc jak ta, gdzie zaczyna zanikać i po prostu natychmiast po usuwa je.
Więc jest to w zasadzie nie znikną w ogóle.
Więc dlatego J.
Corey zapewnia to zwrotnego, ponieważ jest to dość powszechne dla nas chcesz zrobić coś po tym zanikać coś lub po tym, przesuń w dół lub coś, co jest animacja.
Tak, że prowadzi mnie do kolejnego punktu, który jest, że chcę, aby pokazać niektóre z innych animacji, które możemy zrobić, więc możemy również znikną rzeczy.
Więc jeśli mogę ustawić wyświetlanie się żadna na początku jak to i odświeżyć.
Nie widzimy DIV bo teraz są one ukryte zamiast blaknięcie je, gdy klikniemy możemy zanikać je i działa tak, jak można by oczekiwać.
Kliknij na przycisk i znikną w ciągu sekundy, a następnie, jeśli chcemy uruchomić jakiś kod po tym, gdy wiemy, że skończysz blaknięcie możemy umieścić jakiś kod i powiedział, że jeśli wywołanie zwrotne tutaj.
Dobrze więc to Faden.
GK zapewnia jeszcze jeden miły sposób na blaknięcie, które nazywa Faid Faid przełącznika, przełącznik działa w ten sam sposób.
I zapewnić liczbę milisekund i będzie wiedzieć, czy to coś musi zanikać lub oddalać zależności od tego czy jest to obecnie wyświetlane, czy nie.
Więc jeśli odświeżyć i klikam na Fade przełącznik zaczyna karmiąc je wszystkie, a następnie zanik ich wszystkich iz powrotem.
Jest to w zasadzie jak dodawanie klasy do listy klas lub przy użyciu klasy przełączania z Jay Querrey, gdzie to właśnie decyduje, czy potrzebuje zanikać lub zanikają.
Dobrze więc, że jest blaknięcie następny zestaw efektów, które chcę wykazać, są one przesuwane efekty.
Więc tutaj mamy zjechać przełączania slajdów i przesuń w górę.
Więc zacznę zjechać w dół i co robi jest potrzebny element, który nie jest aktualnie pokazując zamiast animacji krycie na elemencie jak Faid to właściwie animuje wysokość elementu.
Więc pokażę ci, jak to działa.
Jesteśmy ma zamiar to zmienić.
Zamiast zanikać przełącznik musimy po prostu przesuń w dół.
A to dlatego, że kiedy odświeżyć nasze elementy są ukryte.
Więc jeśli uruchomię przesuń w dół, gdy klikniemy na przycisku zobaczysz, że wysokość jest animowana w dół i to samo tyczy się przesuwać się w górę.
To nie odwrotnie.
Więc jeśli mogę pozbyć się na wyświetlaczu, dzięki czemu są one wyświetlane.
A teraz kliknij na przycisku.
Ich wysokość jest animowana i przesuwać do góry i następnie wyświetlanie wartości Brak na końcu.
A druga metoda jest przełącznik suwakowy, który działa podobnie jak Faid przełączania, gdzie decyduje, co robić.
Więc jeśli kliknę ślizgają się i teraz zjechać w dół iz powrotem w górę iw dół.
Więc to wszystko jest do góry przesuń suwak w dół i przesuń przełącznik.
Byli tak samo jak oni Faid metod analogowych.
Istnieje również opcjonalna funkcja zwrotna, że ​​możemy przekazać w.
Jeśli więc dać czas jak 1 sekundę, a następnie mogę dostać wezwanie widok.
A ja po prostu zrobić kolejny con. że log na szkiełku końcowego odbywa.
I że drukuje tylko po pełnym zakończeniu druga slide.
Więc odświeżyć.
Spójrzmy na konsoli i kliknij kliknij mnie i można zobaczyć tylko raz wydrukowane suwak zostało zrobione.
To samo tutaj zwrócić uwagę tutaj.
Spowoduje to zmianę do sześciu.
No to jedziemy.
Ale znowu bardziej powszechne wzór jest usunięcie elementów kiedy już slided ich lub zanikać je lub cokolwiek zrobiliśmy to, aby je usunąć.
Więc to zajmie chwilę, aby je przesunąć, a następnie są one usunięte ze strony.
A jeśli idziemy do zakładki elementów naszego ciała jest pusta, z wyjątkiem tego przycisku i skryptu.
Więc mam nadzieję, że daje dobry pomysł, jak niektóre z efektów pracy w kamieniołomie.
Są to zdecydowanie najczęściej blaknięciem oraz przesuwne.
I będziemy ich używać zamiast naszego zrobić listę aplikacji, które mamy zamiar rozpocząć w następnym filmie.