Animācijas tīmekļa lapā var piesaistīt vairāk lietotāju. Pajautājiet sev - ja jūs redzētu tīmekļa lapu, kurā ir diezgan daudz animācijas, vai jūs nevēlaties izpētīt vairāk? Tagad, izmantojot CSS pārejas, jūs varat padarīt savu darbu dzīvu, izmantojot dažas lieliskas animācijas. Paturiet prātā, ka tas jādara pareizi. Apskatīsim CSS pāreju pasauli šādā secībā:
- Kāpēc CSS pārejas?
- Pārejas īpašums
- Kas jums jānorāda?
- Transition-timing-function Funkcijas rekvizīts
- Īpašums Pāreja-Kavēšanās
Kāpēc CSS pārejas?
Pieņemsim piemēru. Ja mainītu elementa krāsu no baltas uz zilu, šīs izmaiņas ir gandrīz acumirklīgas. Lai iegūtu vairāk animētu efektu, varat veikt šīs izmaiņas pakāpeniski. Arī tas izskatās diezgan vizuāli pievilcīgs. Iespējojot CSS pārejas, varat pielāgot izmaiņu veidu. Jūs varat noteikt, kā elementu izmaiņas notiek noteiktos laika intervālos, kas seko paātrinājuma līknei.
CSS pārejas ļauj definēt izmaiņas elementi, konkrētie laika intervāli, paātrinājuma līknes ātrums un daudz kas cits. To visu var izdarīt, neizmantojot Flash vai JavaScript .
Lai labāk izprastu, varat atsaukties uz zemāk redzamo attēlu:
Iepriekš redzamajā attēlā HTML elements vienas sekundes laikā mainīsies no sarkanā uz zilo. Kad notiek pāreja, jūs redzēsiet arī starpkrāsu. Ja jūs neizmantojat CSS pārejas, pamanīsit, ka krāsas izmaiņas no sarkanās uz zilo ir tūlītējas - starpkrāsu neredzēsiet. Izmantojot CSS pārejas, jūs pamanīsit animētu efektu, kad HTML elementi mainīsies no vecā stāvokļa uz jauno.
Pārejas īpašums
Varat izmantot stenogrāfijas pārejas rekvizītu, lai kontrolētu CSS pārejas. Šī stenogrāfijas izmantošana ir ne tikai vienkārša, bet arī var izvairīties no parametriem, kas nav sinhronizēti, un atkļūdošana CSS var būt diezgan nomākta.
Rekvizīts pāreja norāda CSS rekvizītus, uz kuriem vēlaties veikt pārejas efektu. Tikai šie CSS rekvizīti ir animēti.
Sintakse:
pāreja:
Kā iesācējs, jūs varat saskarties ar dažām grūtībām, izmantojot stenogrammu. Ja jūs domājat, ka stenogrāfijas izmantošana jums šobrīd ir nedaudz sarežģīta, pārejas rekvizītus varat norādīt atsevišķi. HTML elementam pārejas rekvizītus var norādīt pa vienam, kā parādīts zemāk esošajā piemērā:
div {width: 100px height: 100px background: lightblue pārejas rekvizīts: width pārejas ilgums: 2s pārejas laika funkcija: lineārā pārejas aizkave: 1s} div: virziet kursoru {width: 300px}Virziet kursoru virs kastes
Iepriekš minētajā piemērā mēs atsevišķi norādījām īpašības (pārejas īpašums, pārejas ilgums, pārejas laika funkcija un pārejas aizkave) un to vērtības. Mēs drīz uzzināsim par šīm pārejas īpašībām.
Kas jums jānorāda?
Lai izveidotu CSS pārejas, vispirms ir jānorāda divas lietas: CSS īpašums, kuram vēlaties pievienot efektu, un šī efekta ilgums.Jums jāpatur prātā viena lieta - nenorādot laika ilgumu, pārejai tiks izmantota noklusējuma vērtība 0 , un tam nebūs nekāda efekta.
Apskatīsim piemēru:
Zemāk esošais kods nosaka platuma rekvizīta pārejas efektu uz piecām sekundēm.
div {width: 100px height: 100px background: zils pāreja: width 5s} div: hover {width: 600px}Pārvietojiet kursoru virs div elementa iepriekš, lai redzētu pārejas efektu.
Iepriekš redzamajā kodā jūs redzēsiet, ka, virzot kursoru virs zilā lodziņa, zilā lodziņš pakāpeniski palielina tā platumu uz piecām sekundēm. Jūs ievērosiet arī to, ka, noņemot kursoru no zilās rūtiņas, zilā krāsa pakāpeniski (nevis uzreiz) atgriezīsies sākotnējā izmērā. Varat arī mainīt platuma un laika ilguma vērtības, lai redzētu, kā šis pārejas rekvizīts ietekmē HTML elementu.
Pārejas efektu var pievienot arī vairākiem īpašumiem. To var izdarīt, atdalot rekvizītus ar komatiem. Apskatīsim piemēru:
Zemāk esošajā kodā pārejas rekvizīts ir norādīts platumam, augstumam un transformācijai.
div {polsterējums: 15 pikseļu platums: 150 pikseļu augstums: 100 pikseļu fons: zaļa pāreja: platums 2s, augstums 2s, transformācija 2s} div: virziet kursoru {platums: 300px augstums: 200px pārveidojums: pagriezt (360deg)} Sveika pasaule (Virziet kursoru virs manis)
Izmantojot iepriekš minēto piemēru, jūs redzēsiet, kā pārvietojas zaļā lodziņa, kad virzāt kursoru virs lodziņa.
Mēs norādījām tikai īpašumu un laika ilgumu. Apskatīsim pārējos parametrus ar dažādiem piemēriem.
Transition-timing-function Funkcijas rekvizīts
Šis īpašums nosaka ātruma līkni pārejas efektam. Tam var būt šādas vērtības:
java jauns datums no virknes
- Vienkārša vērtība: Šī ir noklusējuma vērtība, kuras sākumā efekts ir lēns, tad ātrāks un beidzas lēni.
- Lineārā vērtība: Šis efekts nemaina pārejas ātrumu - tas saglabā ātrumu vienmērīgu no sākuma līdz beigām.
- Vienkāršošanas vērtība: Šis efekts sākas lēnām.
- Vienkāršošanas vērtība: Šis efekts beidzas lēni.
- Vienkāršas izejas vērtība: Šim efektam ir lēns sākums, kā arī lēns beigas.
- Kubiskā beziera vērtība (n, n, n, n): Funkcijā Cubic-Bezier varat norādīt savu vērtību kopu.
Zemāk redzamais kods parāda pārejas efektus lineārām, vieglām, vieglām, vieglākām un vieglākām vērtībām.
div {width: 100px height: 100px background: rozā pāreja: width 2s} # div1 {pārejas laika funkcija: lineāra} # div2 {pārejas laika funkcija: vieglums} # div3 {pārejas laika funkcija: vieglums-iekšā } # div4 {pārejas laika funkcija: viegluma izeja} # div5 {pārejas laika funkcija: viegluma ienākšana} div: virziet kursoru {platums: 300 pikseļi}Virziet kursoru virs zemāk redzamajiem div elementiem
lineārs
vieglums
vieglums
vieglums-out
vieglums-ārā
Īpašums Pāreja-Kavēšanās
Dažreiz vēlaties, lai animācija notiktu pēc noteikta laika. Rekvizīts pārejas aizkave ļauj norādīt pārejas efekta aizkavēšanos. Kavēšanos var norādīt sekundēs.
Ņemsim piemēru, lai redzētu pārejas efekta aizkavēšanos:
div {width: 100px height: 100px background: dzeltens pāreja: width 3s pārejas kavēšanās: 1s} div: hover {width: 300px}Virziet kursoru virs apakšējā div elementa
Piezīme: Jūs varat novērot, ka 1 sekunžu aizture pirms efekta sākuma
Iepriekš norādītajā kodā, virzot kursoru virs dzeltenā lodziņa ar kursoru, pamanīsit (vienu sekundi), ka efekta nav. Pēc vienas sekundes gaidīšanas jūs pamanīsit efektu.
Ar to mēs esam nonākuši pie šī CSS pārejas raksta beigām. Tagad varat pievienot animācijas savām tīmekļa vietnēm. Izmēģiniet šos piemērus.
Pārbaudiet mūsu kas nāk ar instruktoru vadītu tiešraides apmācību un reālās dzīves projektu pieredzi. Šīs apmācības ļauj jums prasmīgi strādāt ar back-end un front-end tīmekļa tehnoloģijām. Tas ietver apmācību par Web izstrādi, jQuery, Angular, NodeJS, ExpressJS un MongoDB.
Vai mums ir jautājums? Lūdzu, pieminējiet to emuāra “CSS Transition” komentāru sadaļā, un mēs ar jums sazināsimies.