JS ja jQuery kasutamisel on meil animatsioonide üle täielik kontroll ja võime luua ka vingeid efekte, kuid hind on üsna kõrge. Töötlemisaeg, brauseriteülene ühilduvus (näiteks mobiilseadmed on JS-i puhul üsna erinevad) ja koodi keerukus ise on punktid, mida peaksime animeeritud liideste loomisel silmas pidama.


Nii näeme täna, kuidas vältida JS-i CSS-i animatsioonide ja üleminekute abil. Arutleme väga lihtsatest etappidest kuni fantastiliste efektide, näiteks akordionipaneelide ja animeeritud alammenüüdeni.

Haarake istmelt, märkmepaberilt ja päris brauserilt (kõike muud kui IE) ja alustame.

Soojendama

CSS-animatsioonide kasutamisel on meil üsna vähe eeliseid (ja puudusi, nagu kõigil meie elus). Kui peate need oma ülemusele või kliendile müüma, peaksite seda meeles pidama:

  • Need on potentsiaalselt kiiremad, kuna saavad kasutada riistvaralist kiirendust (HTML5 rakendustena)
  • Need toimivad paremini mobiilseadmetes ega vaja puuteürituste jälgimiseks spetsiaalset koodi
  • JS-i peab tõlgendama brauser ja võimalused brauseri purustamiseks on palju suuremad. Nii et kui CSS ebaõnnestub, ebaõnnestub see vaikselt, samal ajal kui JS võib kogu lehe murda
  • Neil on üsna hea brauseri tugi (see sait aitab teil kontrollida selle kohta konkreetset statistikat: http://caniuse.com/#search)

CSS3 animatsioonide näited

Enne kui hakkame selle postituse kallale asuma, vaatame mõnda ilusat animatsiooni, mis on tehtud puhtas CSS-is.

Puhas CSS-i Twitter ebaõnnestunud vaal

Animeeritud ebaõnnestunud vaal

 Steven Dennise tehtud, vaadake seda tegevuses.

Puhas CSS-kerimiskoks
CSS 3 animatsiooni näited: kerimiskoksi purk

Valmistaja Roman Cortes, vaadake seda tegevuses.

Puhas CSS Walking Man

CSS 3 animatsiooni näited: The Walking Man

 Andrew Hoyeri tehtud, vaadake seda tegevuses.

Käte määrimine

Alustame koodi. Animatsiooni käivitamiseks kasutame palju CSS-i pseudoklasse. Ausalt öeldes soovitavad paljud arendajad kasutada animatsioonide aktiveerimiseks ja desaktiveerimiseks JS-i, kuid siin näeme lihtsamat viisi.

#test {
taust: punane;
}
#test: hõljutage kursorit {
taust: roheline;
}
#test: aktiivne {
taust: sinine;
}
#test: target {
taust: must;
}

Meil on veel mõned pseudoklassid, mida kasutada, kuid teil on idee! Nii et juhtub siis, kui klõpsate elemendil #test (eeldusel, et see on link):

  • Tavaline olek: taust on punane
  • Hõlg: Kui hiir siseneb elementide alale, on sellel roheline taust
  • Aktiivne: kui klõpsate sellel kursorit ja hiirenuppu veel vajutades, on taustvärv sinine
  • Sihtmärk: kui praeguse lehe URL-is on # test, on see element must

Kõiki neid saab kasutada CSS-i animatsioonide jaoks, näiteks võite luua 2 linki CSS-i animatsiooni aktiveerimiseks ja desaktiveerimiseks, kasutades selleks pseudo-elementi sihtmärgiga:

aktiveeri
välja lülitada

CSS-i üleminekud

CSS-i üleminek muutub algseisundist sujuvalt. Seega määratlete „ülemineku” atribuudiga põhivalijal aja ja iga omaduse, mida see mõjutab, ja kuidas animatsioon peaks olema. Vaatame näidet:

.test {
/ * ülemineku omaduse kestuse ajafunktsioon, * /
värv: sinine;
üleminek: värv 2s, fondi suurus 2s lihtsustatud;
}
.test: hõljutage kursorit {
värv: punane;
}
.test: aktiivne {
kirjasuurus: 200%;
}

Testi elemendi hõljumisel muutub värv järk-järgult sinisest punaseks (milline kena palett, mis?). Elemendil klõpsamisel suureneb fondi suurus järk-järgult 200% -ni vaikesuurusest.

Samuti on meil üleminekuajastuse omadus, mis on seatud kergendamisena, kuidas animatsiooni jaoks mõeldud aega kulutatakse. Siin on võimalikud väärtused:

  • Lineaarne: sama kiirus algusest lõpuni
  • Lihtsus: aeglane käivitamine
  • Kergendamine: aeglane ots
  • Lihtne: aeglane algus, kiire keskel, siis aeglane lõpp
  • Lihtne sisse-välja: aeglane algus, aeglane lõpp
  • Cubic-bezier (a, b, c, d): kohandatud kiirus

Kuubiline Bezieri funktsioon loob kohandatud animatsiooni 4 numbriga, mis varieerub vahemikus 0 kuni 1, mis tähistab animatsiooni kiiruse X kestuse matemaatilist kõverat.

Brauseri parema ühilduvuse tagamiseks peaksite kaaluma ooperi, Firefoxi ja veebikomplekti müüja eesliidete kasutamist järgmiselt:

div {
laius: 400 pikslit;
-o-üleminek: laius 2s;
-moz-üleminek: laius 2s;
-webkit-üleminek: laius 2s;
üleminek: laius 2s;
}

Samuti võiksite meediumipäringute abil määratleda erinevaid üleminekuid sõltuvalt brauseri laiusest (mobiilseadmed, tahvelarvutid). See on lihtne näide:

keha {
kirjasuurus: 1em;
}
@media ekraan ja (maksimaalne laius: 800 pikslit) {
keha {
kirjasuurus: 0,8em;
}
}
@media ekraan ja (maksimaalne laius: 400 pikslit) {
keha {
Fondi suurus: 0,7em;
}
}

Siin muudetakse brauseri laiuse suurendamisel järsult fondi suurust. See kood hoiab ära selle toimimise, andes palju sujuvama ülemineku:

keha {
-o-üleminek: fondi suurus, 5 on lineaarne;
-moz-üleminek: fondi suurus .5 on lineaarne;
-veebikomplekti üleminek: fondi suurus .5 on lineaarne;
üleminek: fondi suurus .5 on lineaarne;
}

Saate seda kasutada ka siis, kui teil on vertikaalse / horisontaalvaate jaoks erinevad kuvarid või suurused, kui soovite muuta laiusi, värve, polsterdusi, menüüekraani.

CSS-animatsioon – algab tõeline lõbu

Animatsioon on ühe valijaga määratletud üleminekute jada. CSS-animatsioonide määratlemiseks peate järgima 2 sammu.

Reeglit @keyframe kasutatakse animatsioonietappide jada määratlemiseks ning see on määratletud kordumatu nime ja stiilide abil, mis kirjeldavad selle animatsiooni toimimist. Nagu tavaliselt, vajame müüja eesliiteid, nagu antud näites:

/ * sama kood iga müüja jaoks * /
@ -o-keyframe my-animation { …
@ -moz-keyframe my-animation { …
@ -webkit-keyframe my-animation { …
/ * animatsiooni nimi * /
@ võtmeraam minu animatsioon {
/ * kaadri valija * /
0% {
/ * raami stiil * /
Vasakul: 0 pikslit;
Ülemine: 0 pikslit;
}
25% {
Vasakul: 200 pikslit;
Ülemine: 0 pikslit;
}
50% {
Vasakul: 200 pikslit;
Ülaosa: 200 pikslit;
}
75% {
Vasakul: 0 pikslit;
Ülaosa: 200 pikslit;
}
100% {
Vasakul: 0 pikslit;
Ülemine: 0 pikslit;
}
}

Niisiis, iga stiil on määratletud raami / ajaraami (nagu need välklambi animatsiooni raamid) protsendimäärana ja stiilide järgi, mida tuleks seal rakendada. Näiteks ütleb see võtmekaas, et element liigub vasakule, siis ülalt, siis paremale ja alla.

Kui olete 1. sammu järginud ja võtmekaadri loonud, saate selle reaalselt mõnele elemendile rakendada. Siis kasutame peaaegu sama loogikat nagu CSS-i ülemineku puhul. Erinevus on see, et nüüd on meie üleminek palju keerukam animatsioon.

Selle rakendamiseks kasutame animatsiooni atribuuti ja sellel on 7 alamomadust:

  • Nimi: kordumatu tunnus
  • Kestus: kui kaua see võtab 0–100%
  • Ajastusfunktsioon: peaaegu sama, mis ülemineku ajafunktsioon
  • Viivitus: kui kaua võtab aega 0% käivitamine
  • Iteratsioonide arv: mitu kordust meil on (lõpmatu silmuse jaoks lõpmatu)
  • Suund: tavaline või vahelduv (vastupidine)
  • Esitusolek: kui animatsioon töötab või on peatatud

See rakendab meie animatsiooni elemendi #test korral, kui see on lehe sihtmärk:

#test: target {
/ * animatsioon-nimi | kestus | ajafunktsioon | viivitus | iteratsiooni arv | suund | mänguolek * /
animatsioon: minu animatsioon 10s lineaarsed 0s lõpmatu normaalne jooksmine;
}

Seda silmas pidades võime luua paar suurepärast näidet.

CSS Ainult akordion

Loome kokkupandavad paneelid, kasutades CSS-i animatsioone. Siin on HTML-i põhistruktuur:

1. vahekaart

1. TEKST

2. sakk

2. TEKST

3. sakk

3. TEKST

Sellega luuakse lihtsalt paneelid ja link, mis neist kõik käivitab. Ja siin juhtub maagia:

/ * mis tahes lõhe, mis asub akordioni sees * /
.akordion div
/ * on vaikimisi peidetud * /
kõrgus: 0;
ülevool: varjatud;
/ * must maagia * /
üleminek: kõrgus 1s;
}
/ * kui nimetatud div on sihtmärk * /
.akordion div: sihtmärk {
/ * kõrgus: automaatne ei tööta, kuid see töötab hästi * /
kõrgus: 80 pikslit;
}

Päris lihtne, ah? Ja kas olete kogu oma elu veetnud selleks JS-i kasutades? 🙂

Ainult CSS-i menüü alammenüüdega

Ja see on veel üks üsna lihtne rakendus. Teil on kindlasti teie saidil navigeerimismenüü ja sageli peame seal kasutama mõnda alammenüüd. Parim viis üksuste kuvamiseks ja peitmiseks on jQuery kasutamine, eks? Noh, mõelge uuesti pärast selle koodi testimist:

  • 1. punkt
    • Punkt 1.1
    • Punkt 1.2
  • Punkt 2
    • Punkt 2.1
    • Punkt 2.2

Ja nõidus algab siit:

a {
/ * muutes lingid lihtsalt paremaks * /
kuva: blokeerima;
polster: 4px;
}
nav {
teksti joondamine: keskel;
}
/ * suvaline menüü (ka põhimenüü) * /
nav ul {
kuva: inline-block;
nimekirja stiil: puudub;
}
nav>ul>li {
/ * horisontaalsed üksused (vertikaalne töötab ka hästi) * /
ujuk: vasak;
}
nav li div {
/ * suletakse alammenüü * /
kõrgus: 0;
ülevool: varjatud;
/ * Houdini tunded * /
üleminek: kõrgus 1s;
}
nav li: hõljutage>div {
kõrgus: 56px;
}

Summeerida

See on kindlasti vaid alustamise juhend. Seal on palju muid lahedaid efekte, mida saab teha ainult CSS-i animatsioonide abil, ja palju asju on kindlasti veel ees.

Niisiis, kas olete seda varem kasutanud? Kas suudate välja mõelda veel ühe hea rakenduse CSS-i animatsioonide jaoks? Jagage oma mõtteid kommentaaride abil!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me