Vue Academy · Lekcja

Przejścia i animacje CSS

Właściwość transition w CSS, animacje klatkowe, używanie Animate.css z Vue Transition.

Lekcja 2 z 413 kroki

Przejścia i animacje CSS to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dwa sposoby animowania w CSS

CSS udostępnia dwa narzędzia, które doskonale współpracują z przejściami Vue: właściwość transition (interpoluje wartości między dwoma stanami) oraz @keyframes wraz z animation (definiuje wieloetapowe sekwencje). Vue może sterować oboma rozwiązaniami.

Skrócona właściwość transition

Skrócona właściwość transition łączy property, duration, timing-function i delay w jednym wierszu. Kolejność jest następująca: property, duration, easing, delay.

.box {
  /* property duration easing delay */
  transition: transform 0.4s ease-in-out 0s;
}

Przejścia wielu właściwości

Oddzielaj wiele przejść przecinkami. Możesz jednocześnie animować transform i opacity, aby uzyskać efekt przesunięcia i zanikania.

.slide-enter-active,
.slide-leave-active {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.slide-enter-from {
  transform: translateX(20px);
  opacity: 0;
}

Gdy transition to za mało

transition animuje tylko przejście między dwoma stanami. Do odbijania, pulsowania lub ruchu wieloetapowego potrzebujesz @keyframes, które pozwala zdefiniować wiele punktów pośrednich.

Definiowanie klatek kluczowych

@keyframes nadaje nazwę sekwencji stanów określanych za pomocą wartości procentowych (lub from/to). Każdy punkt opisuje style obowiązujące w danym miejscu osi czasu.

@keyframes bounce-in {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

Właściwość animation

Zastosuj zestaw klatek kluczowych za pomocą skróconej właściwości animation: name, duration, timing-function, delay, iteration-count, direction.

.bounce-enter-active {
  animation: bounce-in 0.5s ease both;
}

Podłączanie klatek kluczowych do Transition

Umieść właściwość animation w klasie enter-active, aby animacja była odtwarzana podczas wstawiania elementu. Przy wyjściu uruchom te same klatki kluczowe w odwrotnej kolejności.

.bounce-leave-active {
  animation: bounce-in 0.5s ease reverse both;
}

Używanie Animate.css

Animate.css to biblioteka gotowych animacji opartych na klatkach kluczowych. Zamiast pisać własne klasy, można polecić Vue bezpośrednie użycie klas Animate.css za pomocą właściwości custom-class.

<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->

enter-active-class i leave-active-class

<Transition> przyjmuje właściwości pozwalające zastąpić automatycznie generowane nazwy klas. enter-active-class i leave-active-class umożliwiają podłączenie dowolnej zewnętrznej klasy — doskonale sprawdzają się w przypadku Animate.css.

<Transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Animated by Animate.css</div>
</Transition>

Jawne ustawianie czasu trwania

Gdy czas działania CSS jest niejednoznaczny (animacja i przejście występują jednocześnie), ustaw właściwość duration, aby Vue dokładnie wiedziało, kiedy usunąć klasy. Przyjmuje ona liczbę lub obiekt zawierający enter/leave.

<Transition :duration="{ enter: 500, leave: 300 }">
  <div v-if="show">Precise timing</div>
</Transition>

Funkcje wygładzania mają znaczenie

Funkcja timing określa charakter ruchu. ease-out sprawia, że wejście wydaje się responsywne, ease-in dobrze sprawdza się przy wyjściu, a cubic-bezier() zapewnia pełną kontrolę.

.pop-enter-active {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

Szybki test

Która właściwość pozwala zastosować klasę Animate.css podczas wejścia?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Porównano skrót transition (interpolacja między dwoma stanami) z połączeniem @keyframes i animation (osie czasu z wieloma krokami), a także nauczono się integrować Animate.css za pomocą właściwości enter-active-class i leave-active-class, używając duration do precyzyjnego określania czasu trwania.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Przejścia i animacje CSS” jest bezpłatna?

Tak — pełny tekst „Przejścia i animacje CSS” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Przejścia i animacje CSS”?

Właściwość transition w CSS, animacje klatkowe, używanie Animate.css z Vue Transition. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Przejścia i animacje CSS”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy