Pārejas ir CSS animācijas pamatveids, ko varat izmantot, lai radītu skaistus efektus.

Key Takeaways

  • CSS pārejas vienmērīgi maina rekvizītu vērtības, pievienojot tīmekļa elementiem atgriezenisko saiti un vizuālu pievilcību un uzlabojot lietotāja pieredzi.
  • Pārejas īpašības, piemēram, pārejas rekvizīts, pārejas ilgums, pārejas laika funkcija un pārejas aizkave, ir galvenie, lai kontrolētu pāreju uzvedību un laiku.
  • Iesācējiem jāsāk ar vienkāršām pārejām, jāsaprot kastes modelis, iepriekš jāplāno pārejas, optimizējiet veiktspēju, apsveriet pieejamību un izmantojiet Chrome izstrādātāju rīkus, lai nodrošinātu nevainojamu darbību attīstību.

Lai izveidotu izcilas vietnes, ir nepieciešams līdzsvars starp pievilcīgu saskarni un aizraujošu mijiedarbību. Šīm mijiedarbībām ir liela nozīme lietotāja pieredzes veidošanā. Kā izstrādātājs bieži vien paļausies uz dažādām metodēm, lai to panāktu. Tostarp CSS pārejas izceļas kā viens no vienkāršākajiem veidiem, kā izveidot vienkāršu mijiedarbību tīmekļa lapā.

instagram viewer

Lai varētu sākt veidot nevainojamas, interaktīvas vietnes, jums ir nepieciešama izpratne par CSS pārejām, rekvizītiem, paraugpraksi un daudz ko citu.

Izpratne par CSS pārejām

CSS pāreja noteiktā ilguma laikā vienmērīgi maina īpašuma vērtību no sākotnējā stāvokļa uz galīgo. Šādas pārejas pievieno atgriezenisko saiti un vizuālo pievilcību tīmekļa elementiem, kā arī var uzlabot lietotāja pieredzi. Pārejas ir viena no daudzajām funkcijas, kuras varat izmantot, lai padarītu vietni adaptīvu.

Pāreja notiek, reaģējot uz trigera notikumu, piemēram, virzot kursoru virs pogas. Piemēram, kad virzāt kursoru virs pogas, CSS pāreja var mainīt fona krāsu no viena stāvokļa (sākotnējā) uz citu (galīgo). Šī pāreja notiek jūsu norādītajā laikā, radot vizuāli pievilcīgu efektu.

Pārejas īpašības

Neatkarīgi no efekta, ko mēģināt izveidot, jums ir jāsaprot pieejamie pārejas rekvizīti. Varat tos izmantot, lai precizētu pāreju darbību.

pārejas īpašums

Šis rekvizīts nosaka, kurš CSS rekvizīts (vai rekvizīti) tiks pakļauti pārejas efektam. Varat uzskaitīt vairākus rekvizītus, atdalot tos ar komatiem, lai pārietu vienlaikus. Iekļaujiet konkrēta rekvizīta nosaukumu, lai pārejas laikā mainītos tikai šis rekvizīts. Vai arī izmantojiet atslēgvārdu visi lai pārvietotu visus CSS rekvizītus, kas atbalsta pāreju.

Lūk, sintakse:

transition-property: property1, property2, ...;

pārejas ilgums

Šis rekvizīts iestata pārejas efekta ilgumu, norādot, cik ilgi animācija jāpabeidz. Norādiet vērtību, izmantojot sekundes (s) vai milisekundes (ms), piemēram 0,5 s vai 300 ms. Šī ir sintakse:

transition-duration: time;

pārejas laika funkcija

Šis rekvizīts kontrolē pārejas laiku, definējot animācijas paātrinājumu un palēninājumu. Varat to izmantot elementu veidošanā, lai radītu dažādus atvieglošanas efektus. Šeit ir dažas vērtības/laika funkcijas, ko izmēģināt:

  • vieglumu: lēns sākums, tad ātrs, tad lēns beigas (noklusējums).
  • lineārs: Pastāvīgs ātrums.
  • atvieglošana: lēns sākums.
  • atvieglošana: Lēna beigas.
  • vieglums iekšā-out: lēns sākums un beigas.

Lūk, sintakse:

transition-timing-function: timing-function;

pārejas aizkave

Šis rekvizīts ievieš aizkavi pirms pārejas sākuma. Varat norādīt vērtību sekundēs (s) vai milisekundēs (ms). Sintakse ir:

transition-delay: time;

Šie rekvizīti kopīgi kontrolē pārejas darbību, tostarp to, kuri rekvizīti animē un kā tieši darbojas animācijas laiks.

Darba sākšana ar vienkāršām pārejām

CSS pārejas īpašību izpratne ir viena lieta, bet kā tās darbojas praksē? Tālāk ir norādītas dažas darbības, kas jāievēro, ja vēlaties veidot elementa stilu, izmantojot pārejas.

1. Atlasiet savu HTML elementu

Izvēlieties HTML elementu, kuram vēlaties lietot pāreju. Tā varētu būt poga, saite, attēls vai jebkurš cits elements, kuram vēlaties pievienot interaktīvu efektu.

html>
<html>
<head>
<style>
 /* CSS goes here */
style>
head>
<body>

<buttonclass="transition-button">Hover Mebutton>
body>
html>

Šis marķējums sniegs jums pamata, noklusējuma pogu, ar kuru sākt strādāt:

2. Identificējiet pārejas īpašumu un definējiet sākotnējo stāvokli

Nosakiet, kuru atlasītā elementa CSS rekvizītu vēlaties animēt, un iestatiet elementa sākotnējo stilu, izmantojot CSS. Šis stāvoklis parāda, kā elements parādās, kad lietotāji ar to nedarbojas.

<style>
/* Identify the property (background-color) */
.transition-button {
 /* Define the initial state */
 background-color: blue;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}
style>

Tagad jūsu pogai būs daži stili, ar kuriem varat praktizēt pāreju:

3. Norādiet lidojuma stāvokli

Izveidojiet CSS kārtulu, kas tiek piemērota, virzot kursoru virs elementa. Šīs kārtulas ietvaros mainiet otrajā darbībā identificēto CSS rekvizītu uz tā galīgo stāvokli.

<style>
/* Specify the hover state */
.transition-button: hover {
 background-color: red;
}
style>

4. Lietojiet pārejas īpašības

Izmantojiet pārejas īpašums, pārejas ilgums, un pārejas laika funkcija rekvizītus, lai norādītu pārejas detaļas.

<style>
.transition-button {
 /* Specify transition properties */
 transition-property: background-color;
 transition-duration: 0.5s;
 transition-timing-function: ease;
}
style>

Šajā piemērā ir parādīts, kā izveidot vienkāršu pogu ar fona krāsu pāreju, kas darbojas, kad kursors atrodas virs tās. Fona krāsa vienmērīgi pāriet no zilas uz sarkanu 0,5 sekunžu laikā ar atvieglojošu efektu. Jūs varat redzēt pilnu ietekmi uz šo GitHub demo.

Izmantojiet šīs darbības kā pamatu, lai izpētītu sarežģītākas pārejas un animācijas savos tīmekļa izstrādes projektos. Izmēģiniet dažus projektus, kur varat pielāgot izvēles rūtiņas un radio pogas, iemācīties izveidot vienkāršu akordeonu, un vēl.

Paraugprakse un padomi iesācējiem

Šeit ir daži paraugprakses piemēri un padomi, kas palīdzēs sākt darbu ar CSS pārejām.

  • Sāciet ar vienkāršām pārejām. Ja esat iesācējs CSS pāreju lietošanā, sāciet ar vienkāršām animācijām, piemēram, krāsu izmaiņām vai necaurredzamības pielāgošanu. Tas palīdzēs jums saprast pamatus pirms sarežģītāku pāreju risināšanas.
  • Izprotiet kastes modeli. Iepazīstieties ar CSS kastes modelis, kas ietver tādas īpašības kā platums, augstums, polsterējums un piemale. Animējot elementus, ir ļoti svarīgi saprast, kā šīs īpašības darbojas.
  • Plānojiet savas pārejas. Pirms pāreju ieviešanas plānojiet, ko vēlaties sasniegt. Uzzīmējiet pārejas stāvokļus, laiku un efektus uz papīra vai digitāli, lai izvairītos no nevajadzīgiem izmēģinājumiem un kļūdām.
  • Optimizēt veiktspējai. Lietojot pārejas, ievērojiet veiktspēju. Izvairieties no sarežģītu pāreju pārmērīgas izmantošanas, jo īpaši mobilajās ierīcēs, jo tās ietekmē ielādes laiku un lietotāja pieredzi.
  • Apsveriet pieejamību. Nodrošiniet, lai jūsu pārejas būtu pieejamas visiem lietotājiem. Nodrošiniet alternatīvus veidus, kā piekļūt saturam vai funkcijām, kas ir atkarīgas no pārejas, īpaši personām ar invaliditāti.
  • Izmantojiet Chrome izstrādātāju rīkus. Izmantojiet visas Chrome izstrādātāju rīku iespējas, lai nodrošinātu netraucētu pāreju. Izmantojiet DevTools, lai pārbaudītu un mainītu pārejas rekvizītus reāllaikā un eksperimentējiet ar dažādām laika noteikšanas funkcijām.

Ievērojot šos paraugprakses piemērus un padomus, varat izveidot stabilu pamatu darbam ar CSS pārejām un pakāpeniski attīstīt savas prasmes, lai izveidotu saistošu un interaktīvu tīmekļa pieredzi.

Saderība starp pārlūkprogrammām

Vairāku pārlūkprogrammu savietojamība ir ļoti svarīgs apsvērums, strādājot ar CSS pārejām, lai nodrošinātu, ka jūsu animācijas un mijiedarbības darbojas konsekventi dažādās tīmekļa pārlūkprogrammās. Tālāk ir sniegti daži paraugprakses piemēri un padomi, kā nodrošināt vairāku pārlūkprogrammu saderību ar CSS pārejām.

  • Izmantojiet prefiksus piegādātāja īpašumiem. Dažādās pārlūkprogrammās konkrētiem CSS rekvizītiem var būt nepieciešami pārdevēja prefiksi. Piemēram, jums var būt nepieciešams izmantot -tīmekļa komplekts- Safari un Chrome, -moz- Firefox un -o- priekš Operas. Vienmēr iekļaujiet šos prefiksus, ja nepieciešams, lai aptvertu plašu pārlūkprogrammu klāstu.
  • Pārbaude vairākās pārlūkprogrammās. Regulāri pārbaudiet savas pārejas dažādās pārlūkprogrammās, tostarp Chrome, Firefox, Safari, Edge un Opera. Izmantojiet pārlūkprogrammas izstrādātāju rīkus, lai identificētu un novērstu problēmas.
  • Iekļaujiet atkāpšanās stilus īpašumiem, kas animē ar pārejām. Ja pārejas netiek atbalstītas, tiks piemēroti šie stili.

Ievērojot šo praksi, varat izveidot CSS pārejas, kas darbojas nevainojami un konsekventi dažādās pārlūkprogrammās.

Turpiniet praktizēt ar CSS pārejām

Sekojiet līdzi jaunākajām tīmekļa izstrādes tendencēm un paraugpraksei CSS pāreju jomā. Lai iegūtu unikālus efektus, eksperimentējiet ar dažādām pārejas īpašībām un vērtībām. Mācīšanās bieži ir saistīta ar izmēģinājumiem un kļūdām, tāpēc atkārtojiet un pielāgojiet pārejas laika gaitā.