Przejścia i animacje odgrywają ważną rolę w doświadczeniu użytkownika. Dodając subtelne animacje i przejścia między elementami na stronie internetowej, możesz poprawić wrażenia użytkownika. Witryna będzie wyglądać znacznie płynniej, bardziej wciągająco i ogólnie lepiej przez cały czas.

W tym samouczku pokazano, jak zaimplementować przejścia i animacje w Vue.js. Dowiesz się, jak tworzyć zarówno proste przejścia, jak i złożone animacje za pomocą przemiana Klatki kluczowe komponentów i CSS.

Komponent przejściowy Vue.js

Vue.js ma wbudowany przemiana komponent, który pozwala tworzyć animacje w Twojej aplikacji. Ten komponent otacza element docelowy, który chcemy animować.

Tutaj komponent przejściowy zawija nagłówek pierwszego poziomu:

 Cześć </h1>
</transition>

Kiedy zawijasz element za pomocą przemiana komponent, komponent zastosuje klasy przejścia do elementu, który zawija. W sumie jest sześć klas przejściowych. Trzy kontrolują animację elementu, gdy wchodzi on na stronę. Pozostałe trzy sterują animacją elementu opuszczającego stronę.

Kod użyty w tym artykule jest dostępny w this Repozytorium GitHub i jest darmowy do użytku na licencji MIT.

Stosowanie klas przejściowych, gdy elementy wchodzą na stronę

Podczas procesu wprowadzania elementu do DOM, przemiana składnik stosuje klasy wejść z, Wejdź do, I Enter-aktywny do tego. Te klasy pozwalają kontrolować, w jaki sposób element będzie animowany lub przenoszony na stronę.

• wejść z: Stosowany do elementu przed wejściem do przeglądarki. Ta klasa służy do ustawiania początkowego stanu CSS elementu.
• Wejdź do: Stosowany do elementu, który wchodzi do przeglądarki. Ta klasa służy do ustawiania ostatecznego stanu CSS elementu.
• Enter-aktywny: Stosowane, gdy element przechodzi z jednego stanu do drugiego. Tutaj dyktujesz, jak długo potrwa przejście.

Zobaczmy przykład:

<przemiana>
 <h1> Cześćh1>
przemiana>
.wprowadź-z {
nieprzezroczystość: 0;
}
.Wejdź do {
nieprzezroczystość: 1;
}
.enter-aktywny {
przemiana: nieprzezroczystość 2Słatwość;
}

W tym kodzie przejście nagłówka pierwszego poziomu z niewidocznego (krycie: 0) do w pełni widocznych (nieprzezroczystość: 1). To przejście ma miejsce, gdy element wchodzi do DOM. Bez przejścia tekst pojawiłby się w przeglądarce natychmiast po załadowaniu strony.

Stosowanie klas przejściowych, gdy elementy opuszczają stronę

The przemiana obsługuje trzy inne klasy przejść, które należy zastosować, gdy element opuszcza DOM. Ich imiona to urlop od, pozostawić do, I urlop-aktywny. Te klasy kontrolują, w jaki sposób element będzie animowany lub przenoszony ze strony.

Jak można się domyślić, te klasy są podobne do Wchodzić- klasy, o których mówiliśmy wcześniej. Ale te klasy są aktywowane tylko wtedy, gdy element ma zostać odmontowany z DOM. Montowanie i odmontowywanie to ważne koncepcje DOM. Jako programista powinieneś mieć podstawowa znajomość DOM i inne powiązane pojęcia.

Zobaczmy przykład:

<przemiana>
 <h1> Cześćh1>
przemiana>
urlop-z {
nieprzezroczystość: 0;
}
.pozostawić do {
nieprzezroczystość: 1;
}
.leave-active {
przemiana: nieprzezroczystość 2Słatwość;
}

W takim przypadku nagłówek pierwszego poziomu potrzebuje dwóch sekund, aby powoli przejść z widocznego (nieprzezroczystość: 1) do niewidocznego (krycie: 0). To przejście ma miejsce, gdy element opuszcza DOM. Bez przejścia tekst natychmiast zniknąłby z przeglądarki.

Korzystanie z nazw przejść

Możesz także dodać A nazwa atrybut do komponentu przejścia. Kiedy to zrobisz, Vue dołączy nazwę do twoich klas przejściowych. Oznacza to, że możesz mieć wiele przejść na swojej stronie, z których każde ma unikalne klasy przejścia i właściwości CSS.

Na przykład, jeśli ustawisz nazwę znikać na twoim komponencie przejściowym, wszystkie klasy przejścia będą poprzedzone prefiksem znikać:

<przemiananazwa ="znikać">
 <h1> Cześćh1>
przemiana>
.fade-enter-from {
nieprzezroczystość: 1;
}
.fade-opuść-od {
nieprzezroczystość: 1;
}
// Inny "Wchodzić" I "Zostawić" klasyztheznikaćJakprefiks

Tworzenie przejść za pomocą komponentu Transition

Aby zademonstrować przejście w Vue.js, opakujesz plik H1 w ciągu przemiana część. Pod, utworzysz przycisk. Kliknięcie tego przycisku powoduje przełączenie zmiennej Pokaż Tytuł między FAŁSZ I PRAWDA.

Oto kod:

Następnie zdefiniuj scenariusz Sekcja. Ta sekcja zawiera organizować coś metoda, w której inicjujesz plik Pokaż Tytuł zmienna z FAŁSZ.