Vue Academy · Oppitunti

CSS-siirtymät ja animaatiot

transition-ominaisuus CSS:ssä, keyframe-animaatiot, Animate.css:n käyttö Vue Transitionin kanssa.

Oppitunti 2/413 vaihetta

CSS-siirtymät ja animaatiot on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Kaksi tapaa animoida CSS:llä

CSS tarjoaa kaksi Vue-transitioneihin täydellisesti sopivaa työkalua: transition-ominaisuuden (interpoloi kahden tilan välillä) sekä @keyframes-säännön ja animation-ominaisuuden (monivaiheiset aikajanat). Vue voi ohjata kumpaakin.

transition-lyhennys

transition-lyhennys yhdistää ominaisuuden, keston, ajoitusfunktion ja viiveen yhdelle riville. Järjestys on: ominaisuus, kesto, tasaus, viive.

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

Usean ominaisuuden transitionit

Erota useat transitionit pilkuilla. Voit animoida transform- ja opacity-ominaisuuksia yhdessä liu'utus- ja fade-efektin luomiseksi.

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

Kun transition ei riitä

transition animoi vain kahden tilan välillä. Pomppimiseen, sykkimiseen tai monivaiheiseen liikkeeseen tarvitaan @keyframes-sääntö, jonka avulla voit määrittää useita välietappeja.

Keyframes-sääntöjen määrittäminen

@keyframes nimeää tilojen sarjan prosenttiosuuksien (tai from- ja to-avainsanojen) avulla. Kukin pysähdyspiste kuvaa tyylit kyseisessä aikajanan kohdassa.

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

animation-ominaisuus

Ota keyframe-sarja käyttöön animation-lyhenteellä: nimi, kesto, ajoitusfunktio, viive, toistokertojen määrä ja suunta.

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

Keyframes-sääntöjen yhdistäminen Transitioniin

Sijoita animation enter-active-luokkaan, jotta se toistetaan elementin lisäämisen aikana. Poistumista varten suorita samat keyframes-säännöt käänteiseen suuntaan.

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

Animate.css:n käyttäminen

Animate.css on valmiiden keyframe-animaatioiden kirjasto. Omien luokkien kirjoittamisen sijaan voit määrittää Vuen käyttämään Animate.css:n luokkia suoraan mukautettujen luokkien propien avulla.

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

enter-active-class ja leave-active-class

<Transition> hyväksyy propit, joilla luotujen luokkien nimet voi korvata. enter-active-class- ja leave-active-class-propien avulla voit käyttää mitä tahansa ulkoista luokkaa — tämä sopii erinomaisesti Animate.css:lle.

<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>

Keston määrittäminen eksplisiittisesti

Kun CSS:n ajoitus on epäselvä (animaatio ja transition yhdessä), määritä duration-prop, jotta Vue tietää täsmälleen, milloin luokat poistetaan. Se hyväksyy luvun tai enter- ja leave-arvot sisältävän objektin.

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

Ajoitusfunktioilla on merkitystä

Ajoitusfunktio määrittää, miltä liike tuntuu. ease-out tuntuu sisääntulossa responsiiviselta, ease-in poistumisessa, ja cubic-bezier() tarjoaa täyden hallinnan.

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

Pikatarkistus

Minkä propin avulla voit käyttää Animate.css -luokkaa sisääntulon aikana?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Vertailitte transition-lyhennettä (kahden tilan interpolointi) ja @keyframes-määritystä yhdessä animation-ominaisuuden kanssa (monivaiheiset aikajanat). Opitte myös integroimaan Animate.css:n enter-active-class- ja leave-active-class-propien avulla sekä käyttämään duration-proppia täsmälliseen ajoitukseen.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”CSS-siirtymät ja animaatiot” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “CSS-siirtymät ja animaatiot”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”CSS-siirtymät ja animaatiot”?

transition-ominaisuus CSS:ssä, keyframe-animaatiot, Animate.css:n käyttö Vue Transitionin kanssa. Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”CSS-siirtymät ja animaatiot”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Vue Academy