Przejścia CSS w Vuejs i Nuxtjs

Opublikowany: 2022-03-10
Szybkie podsumowanie ↬ Przejścia to dobry sposób na usuwanie, zmienianie lub aktualizowanie danych w aplikacji, ponieważ ich wystąpienie dodaje fajnego efektu i jest dobre dla wygody użytkownika. W tym samouczku przyjrzymy się różnym sposobom stosowania przejść w aplikacjach Vue.js i Nuxt.js.

Przejścia to moduł CSS, który pozwala tworzyć stopniowe przejścia między wartościami określonych właściwości CSS. Zachowanie tych przejść można kontrolować, określając ich funkcję czasową, czas trwania i inne atrybuty. Korzystanie z tych przejść w aplikacjach i witrynach internetowych zapewnia lepsze wrażenia wizualne, a czasem przyciąga i utrzymuje uwagę użytkownika, gdy informacja jest wprowadzana lub opuszczana na ekranie. Według Can I Use przejścia są obsługiwane przez większość przeglądarek, chociaż istnieją pewne drobne problemy z Internet Explorerem i Safari.

Dane dotyczące obsługi funkcji css-transitions w głównych przeglądarkach z caniuse.com
Źródło: caniuse.com. (duży podgląd)

Vue.js to framework JavaScript o otwartym kodzie źródłowym do tworzenia aplikacji internetowych dla klientów i aplikacji jednostronicowych (SPA). Jedną z funkcji tego frameworka jest możliwość bezproblemowego dodawania przejść do aplikacji, aby przełączać się między stronami lub składnikami. W tym samouczku przyjrzymy się, jak to zrobić.

Nuxt.js to także framework JavaScript, zbudowany na bazie Vue.js (i często nazywany frameworkiem), do budowania aplikacji internetowych po stronie serwera, stron generowanych statycznie, a także SPA. Działa tak samo jak Vue.js, więc jeśli znasz Vue.js, nie powinieneś mieć wielu problemów z rozpoczęciem korzystania z Nuxt.js. Nuxt.js zawiera dwie właściwości dodawania przejść do aplikacji i omówimy je również w tym samouczku.

Ten samouczek wymaga podstawowej znajomości Vue.js lub Nuxt.js. Wszystkie fragmenty kodu w tym samouczku można znaleźć w serwisie GitHub.

Więcej po skoku! Kontynuuj czytanie poniżej ↓

Co to jest przejście?

Według Oxford Dictionary przejście można zdefiniować jako:

„Fragment tekstu, który płynnie łączy ze sobą dwa tematy lub sekcje.

Proces lub okres zmiany z jednego stanu lub warunku w inny.”

Z punktu widzenia fizyki przejście definiuje się w następujący sposób:

„Zmiana atomu, jądra, elektronu itp. z jednego stanu kwantowego na inny, z emisją lub pochłanianiem promieniowania”.

Z tych definicji dowiadujemy się, czym jest przejście. Wszystkie definicje dotyczą dwóch różnych rzeczy lub stanów. Pod względem kodu przejście nie różni się tak bardzo.

Co to jest przejście CSS?

Według dokumentacji internetowej Mozilli:

„CSS Transitions to moduł CSS, który pozwala tworzyć stopniowe przejścia między wartościami określonych właściwości CSS. Zachowanie tych przejść można kontrolować, określając ich funkcję czasową, czas trwania i inne atrybuty”.

Oznacza to, że możemy zdefiniować przejście CSS jako: zmianę właściwości CSS jednego lub więcej elementów z jednej wartości na drugą.

Właściwość transition CSS pozwala nam dodać efekt przejścia do dowolnego poprawnego elementu. Składa się z maksymalnie czterech innych właściwości (pięć, jeśli policzymy samą właściwość transition ), które mogą być używane pojedynczo lub łączone jako skrót. Każda właściwość ma inną funkcję.

transition-property

Właściwość transition-property akceptuje nazwę właściwości CSS, na którą chcemy zwrócić uwagę na zmiany i której proces zmiany chcemy przenieść. To wygląda tak:

 .btn { width: 200px; height: 50px; transition-property: width; background-color: red; color: #fff; border: 0; }

Ale ta właściwość nie robi niczego bez następnej właściwości.

transition-duration

Właściwość transition-duration określa czas, przez jaki powinna trwać zmiana elementu(ów) we właściwości transition-property . Ta właściwość jest wymagana w celu przejścia do pracy. Jeśli nie jest ustawiony (z wartością większą niż 0s ), domyślna wartość 0s oznaczałaby, że nie zostanie uruchomiony. Ustawmy więc czas trwania tego przejścia:

 .btn { width: 200px; transition-property: width; transition-duration: 2s; background-color: red; color: #fff; border: 0; }

Tutaj mamy element o nazwie klasy btn o szerokości 200px . Używamy tutaj zarówno właściwości transition-property transition-duration . Oznacza to: „Hej, CSS, uważaj na zmianę właściwości width , a kiedy to się stanie, pozwól, aby efekt zmienił się po 2s ”.

Jeśli więc mamy przycisk z nazwą klasy btn , to plik index.html wyglądałby tak:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Transitions</title> <link rel="stylesheet" href="./assets/styles.css"> </head> <body> <Section> <h1>Hi CSS Transitions</h1> <button class="btn">Hover on me to see a cool transition</button> </Section> </body> </html>

Tutaj mamy plik HTML, który zawiera przycisk z klasą, która ma transition-property i transition-duration , które dbają o zmiany w szerokości elementu.

Należy zauważyć, że aby przejście na naszym przycisku zadziałało, musimy faktycznie zmienić szerokość tego elementu, albo ręcznie dostosowując szerokość za pomocą narzędzi programistycznych w przeglądarce, za pomocą jednego z pseudo CSS klas lub za pomocą JavaScript. Na potrzeby tego samouczka użyjemy pseudoklasy CSS :hover do zmiany szerokości przycisku:

 // existing styles .btn:hover { width: 300px; }

Teraz, jeśli najedziemy kursorem na ten przycisk, powinniśmy zobaczyć, jak szerokość przycisku stopniowo rośnie w ustalonym czasie, czyli 2s .

Zobacz właściwości przejścia i czas trwania przejścia pióra autorstwa Timi Omoyeni (@timibadass) na CodePen.

transition-timing-function

Właściwość transition-timing-function określa prędkość, z jaką występuje efekt przejścia. Dla tej właściwości dostępnych jest pięć wartości:

  • ease
    To (domyślnie) określa efekt przejścia, który zaczyna się powoli, potem robi się szybko, a potem powoli się kończy.
  • linear
    Określa efekt przejścia z tą samą szybkością od początku do końca.
  • ease-in
    Określa efekt przejścia z powolnym startem.
  • ease-out
    Określa efekt przejścia z powolnym zakończeniem.
  • ease-in-out
    Określa efekt przejścia z powolnym początkiem i końcem.
  • cubic-bezier(n,n,n,n)
    Pozwala to zdefiniować własne wartości w funkcji sześciennej-Beziera.

Jeśli więc dodamy ease-in do naszego przycisku, powinniśmy zauważyć szybkość, z jaką zmienia się width i height , w porównaniu z szybkością, z jaką przycisk wraca do normalnego stanu. Oto nasz zaktualizowany arkusz styles.css :

 .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: ease-in; background-color: red; color: #fff; border: 0; }

Jeśli chcemy uzyskać bardziej dramatyczny efekt prędkości lub swobodę w ustawianiu określonego efektu prędkości, możemy użyć cubic-bezier(n,n,n,n) :

 btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); background-color: red; color: #fff; border: 0; }

Zobacz funkcję czasu przejścia pióra autorstwa Timi Omoyeni (@timibadass) w CodePen.

Ciekawą rzeczą w tej wartości jest to, że możesz ją edytować bezpośrednio w przeglądarce za pomocą narzędzi programistycznych.

sześcienny bezier w narzędziach programistycznych.
Cubic bezier w narzędziach programistycznych przeglądarki. (duży podgląd)

Jeśli klikniesz podświetloną część narzędzi programistycznych, otrzymasz interfejs do modyfikacji opcji cubic-bezier :

sześcienny interfejs Beziera podświetlony na żółto.
Sześcienny interfejs Beziera podświetlony na żółto. (duży podgląd)

Gdy przesuwasz te dwa punkty, wartości (n,n,n,n) zmieniają się i zobaczysz reprezentację (podświetloną na czerwono) tego, jak będzie wyglądał efekt prędkości. Może to być bardzo przydatne, gdy masz na myśli określony efekt prędkości.

transition-delay

Właściwość transition-delay określa, jak długo (w sekundach) musi czekać przejście, zanim zacznie pojawiać się jego efekt. Ten czas różni się od właściwości transition-duration , która określa, jak długo będzie trwał efekt przejścia.

 .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: 5s; background-color: red; color: #fff; border: 0; }

Jeśli spróbujesz tego w przeglądarce, zauważysz opóźnienie, zanim width elementu zacznie się zmieniać. Dzieje się tak z powodu ustawionej przez nas właściwości i wartości transition-delay .

Zobacz opóźnienie przejścia pióra autorstwa Timiego Omoyeni (@timibadass) na CodePen.

Własność skrócona

Poszczególne właściwości przejścia mogą być uciążliwe w użyciu. Z tego powodu mamy skróconą właściwość: transition . Akceptuje wszystkie właściwości w określonej kolejności:

 { transition: abcd; }

Tutaj litery odpowiadają w następujący sposób:

  • a: transition-property
  • b: transition-duration
  • c: transition-timing-function
  • d: transition-delay

Możemy zrefaktoryzować nasze istniejące przejście do pracy za pomocą tej skróconej właściwości:

 // from .btn { width: 200px; height: 50px; transition-property: width; transition-duration: 2s; transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-delay: 1s; background-color: red; color: #fff; border: 0; } // to .btn { width: 200px; height: 50px; transition: width 2s cubic-bezier(0.075, 0.82, 0.165, 1) 1s; background-color: red; color: #fff; border: 0; }

Jeśli wypróbujemy ten kod w przeglądarce, uzyskamy ten sam efekt przejścia, jaki uzyskaliśmy, gdy używaliśmy poszczególnych właściwości.

Zobacz Pen using shorthand property autorstwa Timi Omoyeni (@timibadass) na CodePen.

Przejścia w Vue.js

Vue.js oferuje dwa różne sposoby dodawania przejść do aplikacji. Nie oznacza to, że nie możemy używać przejść w stylu CSS. Oznacza to po prostu, że programiści Vue.js zbudowali na CSS, aby ułatwić korzystanie z przejść. Spójrzmy na nie jeden po drugim.

Przenoszenie poszczególnych elementów i komponentów

Jednym ze sposobów wykorzystania przejść w Vue.js jest owinięcie komponentu transition wokół elementu lub komponentu za pomocą jednego z poniższych sposobów:

  • renderowanie warunkowe ( przy użyciu v-if ),
  • wyświetlanie warunkowe (za pomocą v-show ),
  • elementy dynamiczne,
  • węzły główne komponentów.

Kiedy tworzymy aplikację, zdarzają się sytuacje, w których chcemy wyświetlić dane użytkownikowi w zależności od wartości (takiej jak wartość logiczna). Oto przykład tego, jak to działa, zaczerpnięty z pliku index.vue :

 <template> <div> <p v-if="show">Now you see me!</p> <p v-else>Now you don't!</p> <button @click="show = !show">click me</button> </div> </template> <script> export default { data() { return { show: true } } } </script> <style> </style>

Do tej strony dodaliśmy dwa akapity, które pojawiają się w zależności od wartości show . Mamy też przycisk, który po kliknięciu zmienia wartość show . Dodamy tę stronę do naszego pliku App.vue , importując go w następujący sposób:

 <template> <div> <Index /> </div> </template> <script> import Index from "./components/index.vue"; export default { name: 'App', components: { Index } } </script>

Jeśli otworzymy przeglądarkę, powinniśmy zobaczyć nasz akapit i przycisk:

vue strona docelowa, gdy show jest prawdziwe.
Strona docelowa Vue.js w stanie domyślnym. (duży podgląd)

W tej chwili kliknięcie przycisku zmienia tylko wartość show , co powoduje zmianę widocznego tekstu:

strona docelowa, gdy show jest fałszywe.
Strona docelowa po kliknięciu przycisku. (duży podgląd)

Dodanie przejścia do tego akapitu można wykonać, zawijając oba akapity w składniku transition . Ten komponent przyjmuje name prop, co jest bardzo ważne przy przejściu do pracy.

 <template> <div> <transition name="fade"> <p v-if="show">Now you see me!</p> <p v-else>Now you don't!</p> </transition> <button @click="show = !show">click me</button> </div> </template>

Ta nazwa informuje Vue.js, które przejście zastosować do elementów lub komponentów wewnątrz tego komponentu transition . W tym momencie, jeśli klikniemy przycisk, nadal nie zauważymy żadnego przejścia, ponieważ musimy jeszcze dodać konfigurację dla naszego przejścia w postaci klas CSS.

Należy zauważyć, że używając przejścia między dwoma elementami tego samego znacznika, musimy określić kluczowy atrybut dla każdego elementu, aby nastąpiło przejście.

 <template> <div> <transition name="fade"> <p v-if="show" key="visible">Now you see me!</p> <p v-else key="notVisible">Now you don't!</p> </transition> <button @click="show = !show">click me</button> </div> </template>

Vue.js ma sześć klas przejścia, które są stosowane do elementów lub komponentów wewnątrz komponentu transition , a każda z tych klas reprezentuje stan w procesie przejścia. Przyjrzymy się tylko kilku z nich.

v-enter

Klasa v-enter reprezentuje „stan początkowy wejścia”. Jest to punkt, w którym warunek ( v-if lub v-else ) został spełniony i element ma być widoczny. W tym momencie klasa została dodana do elementu i jest usuwana po dodaniu elementu. name prop (w tym przypadku fade ) dołączona do komponentu transition jest poprzedzona tą nazwą klasy, ale bez v . Ten v może być używany domyślnie, jeśli nie podano name . W ten sposób możemy dodać tę klasę do naszego pliku index.vue :

 <style> p { color: green; } .fade-enter{ color: red; transform: translateY(20px); } </style>

Najpierw dodajemy color green do wszystkich akapitów na stronie. Następnie dodajemy naszą pierwszą klasę przejścia, fade-name . Wewnątrz tej klasy zmieniamy color na czerwony i korzystamy z właściwości transform i translateY , aby przesunąć akapit o 20px wzdłuż osi y (w pionie). Jeśli spróbujemy ponownie kliknąć przycisk, zauważymy, że podczas przełączania następuje bardzo niewiele lub nie ma żadnego przejścia, ponieważ musimy dodać następną klasę, na którą będziemy patrzeć.

v-enter-active

Klasa v-enter-active reprezentuje stan „całego wejścia” elementu przejściowego. Oznacza to, że ta klasa jest dodawana tuż przed wstawieniem lub uwidocznieniem elementu, a po zakończeniu przejścia jest usuwana. Ta klasa jest ważna dla v-enter , ponieważ można jej użyć do dodania właściwości transition CSS do klasy, wraz z jej właściwościami ( transition-property , transition-duration , transition-timing-function , i transition-delay ). niektóre z nich są potrzebne, aby efekt przejścia zadziałał. Dodajmy tę klasę do naszej aplikacji i zobaczmy, co się stanie:

 .fade-enter-active { transition: transform .3s cubic-bezier(1.0, 0.5, 0.8, 1.0), color .5s cubic-bezier(1.0, 0.5, 0.8, 1.0); }

Zobacz przejście Pen vue enter state autorstwa Timi Omoyeni (@timibadass) w CodePen.

Teraz, jeśli klikniemy przycisk, zauważymy przejście koloru i położenie każdego z tekstów, gdy się pojawią. Ale przejście od visible do hidden nie jest wystarczająco płynne, ponieważ nie zachodzi żadne przejście.

v-leave-active

Klasa v-leave-active reprezentuje cały stan, w którym element zmienia się z visible na hidden . Oznacza to, że ta klasa jest stosowana od momentu, gdy element zaczyna opuszczać stronę i jest usuwana po zakończeniu przejścia. Ta klasa jest ważna, aby można było zastosować przejście leave , ponieważ zawiera właściwość transition CSS, która zawiera również inne właściwości przejścia. Dodajmy to do naszej aplikacji i zobaczmy, co się stanie:

 .fade-leave-active { transition: transform 1s cubic-bezier(1.0, 0.5, 0.8, 1.0), color 1s cubic-bezier(1.0, 0.5, 0.8, 1.0); }

Zobacz przejście Pen vue opuść stan aktywny autorstwa Timi Omoyeni (@timibadass) w CodePen.

Gdy teraz klikniemy na przycisk, zauważymy, że element, który powinien opuścić, czeka około 2 sekundy, zanim zniknie. Dzieje się tak, ponieważ Vue.js oczekuje, że następna klasa z tym przejściem zostanie dodana, aby zaczęła obowiązywać.

v-leave-to

Przejście v-leave-to reprezentuje stan „opuszczenia”, czyli moment, w którym element zaczyna wychodzić i jego przejście jest wyzwalane. Jest dodawany jedną klatkę po wyzwoleniu przejścia wychodzącego i usuwany po zakończeniu przejścia lub animacji. Dodajmy tę klasę do naszej aplikacji i zobaczmy, co się stanie:

 .fade-leave-to { transform: translateX(100px); color: cyan; }

Klikając przycisk zauważymy, że każdy element, który opuszcza, przesuwa się w prawo wraz ze zmianą koloru.

Zobacz przejście Pen vue do stanu przez Timi Omoyeni (@timibadass) w CodePen.

Teraz, gdy rozumiemy, jak działają przejścia w Vue.js, oto obraz, który łączy to wszystko:

klasyfikacja vue przejściowych klas
Klasyfikacja klas przejściowych Vue.js. (duży podgląd)

Na koniec zwróć uwagę na niezbyt płynne przejście, które występuje podczas stanów wejścia i wyjścia elementów przechodzących. Dzieje się tak, ponieważ przejścia Vue.js zachodzą jednocześnie. Vue.js ma właściwość mode , która pomaga nam osiągnąć bardzo płynny proces przejścia. Ta podpora przyjmuje jedną z następujących wartości:

  • in-out
    Nowy element przechodzi jako pierwszy, a gdy jest gotowy, bieżący element przechodzi na zewnątrz.
  • out-in
    Bieżący element przechodzi jako pierwszy, a następnie, po zakończeniu, przechodzi nowy element.

Jeśli dodamy ten mode do naszego pliku index.vue i spróbujemy ponownie, powinniśmy zobaczyć lepsze przejście:

 <template> <div> <transition name="fade" appear mode="out-in"> <p v-if="show" key="visible">Now you see me!</p> <p v-else key="notVisible">Now you don't!</p> </transition> <button @click="transitionMe">click me</button> </div> </template>

Teraz, jeśli klikniemy przycisk, zauważymy, że jeden element odchodzi, zanim inny wejdzie. Wynika to z mode , który wybraliśmy dla tego przejścia. Jeśli wypróbujemy inny tryb, uzyskamy inne zachowanie.

Zobacz przejście Pen vue z trybem autorstwa Timi Omoyeni (@timibadass) w CodePen.

Lista przejść

Jeśli kiedykolwiek spróbujesz dodać przejścia do więcej niż jednego elementu naraz za pomocą komponentu transition , w konsoli zostanie wydrukowany błąd:

Błąd przejścia Vue wydrukowany w konsoli.
Błąd Vue.js wydrukowany w konsoli. (duży podgląd)

Dzieje się tak, ponieważ komponent transition nie jest przeznaczony do renderowania więcej niż jednego elementu na raz. Jeśli chcemy przenieść dwa lub więcej elementów na raz lub wyrenderować listę (za pomocą v-for ), korzystamy z komponentu transition-group . Ten komponent również akceptuje name prop, ale różni się od komponentu transition , między innymi:

  • Atrybut klucza jest wymagany dla każdego elementu w tym komponencie.
  • Nie ma potrzeby używania właściwości mode ponieważ więcej niż jeden element byłby renderowany na raz.
  • Element span jest renderowany domyślnie, ale można go zmodyfikować, określając właściwość tag podczas definiowania komponentu transition-group . Spójrzmy na przykład (w naszym pliku listTransition.vue ):
 <template> <div> <h1>List/Group Transition</h1> <ul> <li v-for="user in users" :key="user.id"> {{user.name}} <button>Remove</button> </li> </ul> </div> </template> <script> export default { data() { return { users: [ { name: "Vuejs", id: 1 }, { name: "Vuex", id: 2 }, { name: "Router", id: 3 } ] }; } }; </script> <style> </style>

Tutaj mamy tablicę users , przez którą przechodzimy za pomocą v-for , wyświetlając nazwę w naszej sekcji szablonu. Aby móc wyświetlić tę listę, musimy zaimportować ten komponent na stronę App.vue :

 <template> <div> <Index /> <listTransition /> </div> </template> <script> import Index from "./components/index.vue"; import listTransition from "./components/listTransition.vue"; export default { name: "App", components: { Index, listTransition } }; </script>

Zauważ, że gdy używasz komponentu transition-group , zamiast owijać naszą listę znacznikiem ul (lub dowolnym innym, który mamy na myśli), owijamy go wokół komponentu transition-group i dodajemy tag do właściwości tag , w ten sposób:

 <template> <div> <h1>List/Group Transition</h1> <transition-group name="slide-fade" tag='ul'> <li v-for="user in users" :key="user.id"> {{user.name}} <button>Remove</button> </li> </transition-group> </div> </template> <script> export default { data() { return { users: [ { name: "Vuejs", id: 1 }, { name: "Vuex", id: 2 }, { name: "Router", id: 3 } ] }; } }; </script> <style> .slide-fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter { color: mediumblue; transform: translateY(20px); } .slide-fade-leave-to { transform: translateX(100px); color: cyan; } </style>

Tutaj zastąpiliśmy tag ul komponentem transition-group i dodaliśmy ul jako wartość właściwości tag . Jeśli przyjrzymy się zaktualizowanej stronie w narzędziach deweloperskich, zobaczymy, że lista jest opakowana w element, który określiliśmy we właściwości tag (czyli ul ).

tag ul podświetlony w narzędziach programistycznych.
Znacznik ul wyróżniony w narzędziach dla programistów. (duży podgląd)

Do tego komponentu dodaliśmy również właściwość name przejścia z wartością slide-fade , z regułami stylów poniżej w sekcji style , które są zgodne z tą konwencją nazewnictwa. Aby to zadziałało, musimy dodać do naszego pliku następujące wiersze kodu:

 <template> <div> <h1>List/Group Transition</h1> <transition-group name="slide-fade" tag="ul"> <li v-for="user in users" :key="user.id"> {{user.name}} <button @click="removeUser(user.id)">Remove</button> </li> </transition-group> </div> </template> <script> export default { // ... methods: { removeUser(id) { let users = this.users.filter(user => user.id !== id); this.users = users; } } }; </script>

W sekcji szablonu dodajemy zdarzenie kliknięcia do każdego przycisku w pętli i przekazujemy user.id do metody removeUser dołączonej do tego zdarzenia kliknięcia. Następnie tworzymy tę funkcję w sekcji script naszego pliku. Ta funkcja przyjmuje id jako argument. Następnie przeglądamy naszych istniejących użytkowników i odfiltrowujemy użytkownika z id przekazanym do tej funkcji. Po wykonaniu tej czynności zapisujemy naszą nową tablicę użytkowników w danych naszej strony.

W tym momencie, jeśli klikniesz dowolny przycisk dla użytkowników, efekt przejścia zostanie zastosowany, gdy użytkownik zostanie usunięty z listy.

Zobacz przejście na listę Pen Vue autorstwa Timiego Omoyeni (@timibadass) w CodePen.

Przejścia w Nuxt.js:

Dodawanie przejść do aplikacji Nuxt.js różni się od tego, do czego jesteś przyzwyczajony w Vue.js. W Nuxt.js komponent transition jest automatycznie dodawany do aplikacji za Ciebie. Wszystko, co musisz zrobić, to jedno z poniższych.

Dodaj go do indywidualnego komponentu strony

Nuxt.js pozwala nam płynnie dodawać przejścia do poszczególnych komponentów strony. To przejście jest stosowane, gdy użytkownik przechodzi na tę stronę. Wszystko, co musimy zrobić, to dodać właściwość transition do sekcji script komponentu. Ta właściwość może być ciągiem znaków, funkcją lub obiektem. Niektóre z właściwości, które akceptuje, to:

  • name ,
  • mode ,
  • css .

Podobnie jak Vue.js, Nuxt.js ma domyślną name , która jest przypisywana do klasy przejściowej, jeśli nie podano name , i nazywa się page . Zobaczmy, jak to działa, gdy dodamy go do naszej aplikacji w transition.vue :

 <template> <div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore libero odio, asperiores debitis harum ipsa neque cum nulla incidunt explicabo ut eaque placeat qui, quis voluptas. Aut necessitatibus aliquam veritatis. </p> <nuxt-link to="/">home</nuxt-link> </div> </template> <script> export default { transition: { name: "fade", mode: "out-in" }, data() { return { show: true }; } }; </script> <style> p { color: green; } .fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .fade-enter { color: mediumblue; transform: translateY(20px); } .fade-leave-to { transform: translateX(100px); color: cyan; } </style>

Na tej stronie w sekcji szablonu wyświetlamy „lorem ipsum”. Dodaliśmy również właściwość transition , do której przekazaliśmy obiekt, którego name jest ustawiona na fade i którego mode jest ustawiony na out-in . Wreszcie w sekcji style dodaliśmy kilka stylów, które kontrolują przejście, gdy użytkownik nawiguje między tą stroną a inną.

Aby to przejście zadziałało, musimy przejść do /transition , ale nie zauważylibyśmy żadnego przejścia, gdybyśmy ręcznie wprowadzili tę trasę w naszej przeglądarce. Dodajmy więc link do tej strony na stronie index.vue .

 <template> <div class="container"> <div> // .. <nuxt-link to="/transition">next page</nuxt-link> </div> </div> </template>

Teraz, jeśli klikniemy link na jednej z dwóch stron, zauważymy przesuwające się przejście, gdy przeglądarka przechodzi do i z trasy /transition .

pageTransition

Dodawanie przejść do poszczególnych stron może być trudne, jeśli chcemy dodać je do wszystkich stron w aplikacji. Tu właśnie wkracza pageTransition . Ta właściwość pozwala nam dodać ogólną konfigurację dla wszystkich naszych stron w pliku nuxt.config.js . Ta właściwość akceptuje zarówno ciąg, jak i obiekt jako opcję. Zobaczmy, jak to działa w nuxt.config.js :

 export default { // ... /* ** Global CSS */ css: [ '~/assets/transition.css' ], pageTransition: { name: "fade", mode: "out-in" }, }

Tutaj dodaliśmy link do pliku CSS, który wkrótce utworzymy. Dodaliśmy również do pliku właściwość pageTransition wraz z jego konfiguracją. Teraz utwórzmy nasz plik CSS, transition.css i dodajmy do niego następujące style:

 .fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .fade-leave-active { transition: transform 1s cubic-bezier(1, 1, 1, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .fade-enter { color: mediumblue; transform: translateY(20px); } .fade-leave-to { transform: translate3d(-500px, -300px 400px); color: cyan; }

Dodaliśmy klasy i style, które zostaną zastosowane do przejścia między jedną trasą a drugą. Jeśli pozbędziemy się konfiguracji przejścia ze strony transition.vue i spróbujemy nawigować między dwiema stronami, otrzymamy efekt przejścia.

layoutTransition

Właściwość layoutTransition umożliwia nam stosowanie przejść na podstawie układu strony. Działa tak samo jak pageTranslation , z wyjątkiem tego , że działa w oparciu o layout . Domyślna nazwa przejścia to layout . Oto przykład tego, jak to działa, w nuxt.config.js :

 export default { // ... /* ** Global CSS */ css: [ '~/assets/transition.css' ], layoutTransition: { name: "fade", mode: "out-in" }, }

Zwróć uwagę, że fade musi być nazwą układu, aby przejście działało z jego układem. Stwórzmy ten nowy układ w newLayout.vue , aby zobaczyć, co mam na myśli:

 <template> <!-- Your template --> <div> <h1>new layout</h1> </div> </template> <script> export default { layout: "blog" // page component definitions }; </script>

Wniosek

Dowiedzieliśmy się o przejściach CSS i sposobach ich tworzenia, korzystając z właściwości przejścia ( transition-property , transition-duration , transition-timing-function , i transition-delay ) oraz skróconej właściwości transition . Omówiliśmy również, jak zastosować te przejścia zarówno w Vue.js, jak i Nuxt.js. Ale to nie wszystko. Vue.js ma dla nas więcej sposobów na zastosowanie przejść w aplikacji:

  • „Animacje CSS”, Vue.js
  • „Przejście między komponentami”, Vue.js
  • „Przejścia państwowe”, Vue.js

Powiązane zasoby

  • „Przejścia CSS”, MDN Web Docs
  • „przejście” (definicja), Leksyko
  • „Przejścia CSS”, W3Schools
  • „Enter/Leave and List Transitions”, Vue.js
  • Enter/Opuść grafikę, Vue.js
  • „API: Właściwość transition strony”, Nuxt.js
  • „API: właściwości przejścia”, Nuxt.js
  • „Przejścia stron i układów w Nuxt.js”, Debbie O'Brien, DEV