Vue.js: Podstawy animacji

Vue.js 2.5.x

0:00W tej i w kilku kolejnych lekcjach porozmawiamy sobie o tym, w jaki sposób

0:04możemy animować pokazywanie i ukrywanie elementów lub przejścia

0:08pomiędzy poszczególnymi komponentami. Świetna rzecz, dostępna w Vue i będę

0:13chciał ci teraz pokazać na czym sprawa polega. Przypominam ci przykład, który

0:17mieliśmy wcześniej, mamy taką tabelę i jeżeli klikamy to elementy są usuwane i

0:21w momencie kiedy usuniemy wszystkie, pojawia się taki oto komunikat i działa to

0:25na zasadzie v-if, czyli jeżeli w tablicy już nic nie ma, to ten element jest

0:29ukrywany, a ten element jest pokazywany. Chciałbym teraz zrobić tak, żeby one

0:34były pokazywane i ukrywane za pomocą animacji i okazuje się, że jest

0:38to bardzo proste, ale tutaj trzeba zrozumieć w jaki sposób to działa. Jeżeli

0:42to zrozumiesz będziesz mógł stworzyć dowolnie złożone animacje. Po pierwsze

0:46elementy muszą korzystać z v-if, a nie z v-show, tak

0:50jak w tym przypadku, czyli mamy tutaj taki warunek, że będzie albo ten element albo

0:54ten, czyli zawsze będzie jeden element i to jest bardzo ważne i oplatamy

0:59te elementy takim elementem, który się nazywa transition, te

1:05dwa elementy sobie w tym ujmiemy, czyli te, które chcemy animować, okej

1:11i zasadzie tyle wystarczy, można byłoby pomyśleć, żeby

1:16to zaczęło działać, aczkolwiek nic się tutaj ciekawego nie wydarzy. Niemniej

1:20jednak jeżeli byśmy sobie przeszli tutaj i kliknęli na tą tabelę, to Chrome Dev

1:24Tools możesz wybrać Break On i na przykład attribute

1:29modification, czyli jeżeli dowolny atrybut tutaj, na przykład, klasa będzie modyfikowany

1:33to nam się to w debuggerze zatrzyma, więc spróbujmy sobie usunąć wszystkie

1:37elementy i debugger nam się zatrzymał. Okazuje się, że Vue

1:41próbowało tam dodać jakąś klasę, w tym momencie nie widzimy jaka jest to klasa, natomiast

1:46widzimy, że Vue jakąś klasę próbowało w tabeli dodać zanim ją ukryło. Dzieje

1:51się tak właśnie dlatego, że skorzystaliśmy z transition, więc teraz tutaj warto kliknąć

1:55jeszcze raz i odznaczyć attribute modification. Natomiast zapamiętaj,

1:59że jakaś klasa jest tam dodawana. Teraz pytanie jaka? Przejdziemy na stronę dokumentacji,

2:04właśnie tutaj do transition i pokażę ci bardzo

2:08ciekawy diagram do którego ja zawsze wracam kiedy robię coś z animacjami, bo

2:12on nam tutaj pokazuje na czym rzecz polega. W momencie kiedy brakło nam elementów

2:17i ten element miało być ukryty z użyciem v-if, miał być po prostu usunięty

2:21ze strony, rozpoczyna się taki proces. Vue będzie chciało do elementu

2:25dodać klasę v-enter, v-enter-to i dodatkowo

2:30v-enter-active. Przede wszystkim tę kasę i właśnie dlatego w

2:34tym debuggerze nam się to zatrzymał, bo Vue próbowało dodać tam takie klasy, z

2:38tym że po tych klas trzeba przypisać jakieś style, transition albo

2:42key frames w css3 i znowu Vue jest na tyle tutaj inteligentnym framework'iem,

2:47że potrafi z tych styli wyczytać ile trwa animacja i dopiero kiedy

2:51ona się zakończy, on ten element nam rzeczywiście usunie z drzewa DOM. Natomiast

2:56jeżeli byśmy chcieli i zazwyczaj będziemy to robić, zmodyfikować ten przedrostek v, żeby

3:01podać swoją nazwę. Ja to będę chciał od razu zrobić, to na takim transition wpiszemy sobie

3:06name i ja napiszę fade. Wtedy dodawane klasy to

3:10będzie fade enter,  fade enter to oraz fade enter active i

3:14co jest ważne te klasy tutaj są kiedy ten element jest pokazywany. W

3:18naszym przypadku on był ukrywany, więc Vue będzie te klasy stosować

3:23do tego elementu. Dokładnie to samo będzie w tym przypadku, jeżeli zmieniłem

3:27sobie name na fade, to będzie fade leave, fade leave to i fade leave active.

3:31No i teraz żebyśmy zrozumieli o co chodzi, musimy sobie dodać style. Jeżeli

3:36przedrostek nazwałem fade, gdybym tego nie zrobił, wpisałbym Vue, czyli

3:40V, napiszemy sobie tutaj fade i następnie

3:45dodajmy klasę może leave. W zasadzie

3:49to leave to, bo kiedy ten element jest ukrywany, to będziemy animować do takiej

3:54właśnie klasy. Będę chciał przypisać opacity

4:000, ale to nie wszystko, bo muszę jeszcze przepisać transition

4:04i zrobimy to tutaj patrząc jaka klasa jest dodawana kiedy ten element

4:08jest ukrywany, jest to leave active, czyli u nas to będzie fade leave active

4:13do każdego elementu, który ma taką klasę chce przepisać transition

4:19i chcę animować opacity. Chcę

4:24żeby to trwało pół sekundy i żeby miał is in out

4:28i właśnie Vue potrafi sobie zczytać jaki to jest czas

4:33i te klasy będzie odpowiednio dodawało oraz

4:37kiedy ten czas minie czyli animacja się zakończy to Vue dopiero wtedy usunie element. Sprawdzimy

4:42jak to wygląda w praktyce, żeby mieć lepszy ogląd co tutaj się dzieje, kilkam żeby usunąć wszystkie

4:46elementy, ok i wydaje się, że coś poszło nie tak, bo

4:50nie zobaczyliśmy żadnej animacji. Nie mamy tutaj również błędu, więc

4:54zerknę sobie jeszcze raz do kodu no i widzę, że tutaj jest literówka. Tutaj

4:59powinno być jeszcze i, ja może zmienię to na dwie sekundy, żeby to rzeczywiście było jeszcze lepiej

5:03widoczne, bo teraz w ogóle nie zadziałało, ale sprawdźmy, okej i

5:07widzimy, że ta klasa rzeczywiście była dodana, to się zanimowało

5:11z użyciem CSS, czyli jest bardzo wydajne. Dopiero kiedy animacja się zakończyła.

5:15Zobaczmy to raz jeszcze, to wtedy dopiero ten element został ukryty. Natomiast

5:19ten został pokazany jest zbyt wcześnie, ale tym się będziemy chcieli również

5:25zająć i można to zrobić w ten sposób że do transition dodajemy sobie mode

5:30i nazwiemy go tutaj out in. To oznacza, że dopiero

5:34kiedy element się usunie, kiedy zniknie, dopiero

5:38drugi może być pokazany, więc sprawdzimy teraz jak to będzie wyglądać. Całą sekundę

5:42te opacity się animuje i ten element dopiero wtedy się pojawia. Natomiast

5:47ten element również otrzymał wszystkie stosowne klasy, ale my ich jeszcze nie przypisaliśmy,

5:52bo przypisaliśmy dopiero klasy do ukrywania elementu, a do pokazywania są

5:56te klasy tutaj. Dlatego w zasadzie tutaj będziemy mogli sobie to zdublować,

6:00czyli w fade enter active, to

6:04będzie to samo i tutaj fade enter będzie

6:11to też opacity zero, z astanówmy się nad tym żebyś to dobrze zrozumiał, czyli momencie kiedy

6:15Vue będzie chciał pokazać jakiś element, przypisze mu v-enter. W naszym przypadku

6:19fade enter, bo taki przedrostek wybrałem i wtedy chcę, żeby element miał opacity

6:230, żeby nie był po prostu widoczny. Dodatkowo w tym samym momencie

6:27zostanie przypisana klasa fade enter active, która sprawi,

6:31że opacity będzie animowane na przestrzeni dwóch sekund. Moglibyśmy

6:36jeszcze dodać tutaj klasę fade enter to i ustawić wartość opacity na 1,

6:40ale jeżeli tego nie zrobię to domyślnie też to zadziała, bo ten element na początku już

6:44ma opacity 1, on po prostu jest widoczny, więc to powinno nam

6:49zadziałać, możemy to sprawdzić. Usuwam wszystkie elementy

6:53i przez dwie sekundy to będzie znikać i po tym czasie ten element się pojawia

6:57i wygląda to w taki oto sposób. Jeżeli to zmienimy tutaj, zauważ,

7:01że nigdzie w JavaScripcie tego nie musimy robić, wystarczy tutaj. Vue sobie jest w stanie to

7:05sparsować, to w fajny sposób zanimujemy

7:10pokazywanie i ukrywanie tych elementów. Natomiast jeszcze jedna fajna rzecz, po odświeżeniu strony

7:14chciałbym, żeby od razu tutaj się pojawiła taka animacja i możemy to zrobić bardzo

7:18łatwo dodając tutaj atrybuty appear. Wystarczy coś takiego dopisać

7:22i animacja będzie również na samym początku. Jak widzisz w ten

7:26sposób to wygląda i co my zrobimy w tych animacjach, to już zależy od nas i będę

7:31chciał ci pokazać jeszcze kilka przykładów w kolejnych lekcjach.