CSS @starting-style apgūšana: animācijas sākotnējo stāvokļu definēšana

Dinamiskajā tīmekļa izstrādes pasaulē animācijām ir izšķiroša loma lietotāja pieredzes uzlabošanā, vizuālas atgriezeniskās saites sniegšanā un lietotāja mijiedarbības vadīšanā. Lai gan CSS animācijas un pārejas ir ievērojami attīstījušās, precīza animācijas sākotnējā stāvokļa kontrole, īpaši, ja to iedarbina lietotāja mijiedarbība vai stāvokļa maiņa, bieži vien ir radījusi smalkus izaicinājumus. Iepazīstieties ar @starting-style at-rule — jaudīgu CSS funkciju, kas izstrādāta, lai eleganti atrisinātu šo problēmu.

Izaicinājuma izpratne: animācijas pirmais kadrs

Tradicionāli, kad elementam tiek piemērota animācija vai pāreja, tā sākotnējo stāvokli nosaka elementa pašreizējie aprēķinātie stili *brīdī, kad sākas animācija/pāreja*. Tas var izraisīt negaidītus vizuālus lēcienus vai neatbilstības, īpaši tādos scenārijos kā:

• Pārvietošanās starp lapām: Kad komponents jaunā lapā tiek animēts, tā sākotnējie stili var atšķirties no paredzētajiem, ja ar tiem nerīkojas uzmanīgi.
• Animāciju iedarbināšana, uzvirzot kursoru vai fokusējoties: Elementam var būt stili, kas īsu brīdi uzplaiksnī vai mainās, pirms animācija plūstoši pārņem vadību.
• Animācijas, kas piemērotas ar JavaScript: Ja JavaScript dinamiski pievieno klasi, kas iedarbina animāciju, elementa stāvoklis tieši pirms klases pievienošanas ietekmē animācijas sākumu.
• Animācijas, kas ietver display: none vai visibility: hidden: Elementi, kas sākotnēji nav renderēti, nevar piedalīties animācijās, kamēr tie nav padarīti redzami, kas noved pie pēkšņas parādīšanās, nevis plūstošas ienākšanas.

Apsveriet vienkāršu piemēru: jūs vēlaties, lai elements parādītos un palielinātos. Ja elementam sākotnēji ir opacity: 0 un transform: scale(0.5), un pēc tam tiek piemērota CSS animācija, kas mērķē uz opacity: 1 un transform: scale(1), animācija sākas no tā pašreizējā stāvokļa (neredzams un samazināts). Tas darbojas kā paredzēts. Tomēr, kas notiek, ja elementam sākotnēji ir opacity: 1 un transform: scale(1), un pēc tam tiek piemērota animācija, kurai vajadzētu sākties no opacity: 0 un scale(0.5)? Bez @starting-style animācija sāktos no elementa esošā opacity: 1 un scale(1), faktiski izlaižot paredzēto sākuma punktu.

Iepazīstinām ar @starting-style: risinājums

@starting-style at-rule nodrošina deklaratīvu veidu, kā definēt sākotnējās vērtības CSS animācijām un pārejām, kas tiek piemērotas elementam, kad tas pirmo reizi tiek ievietots dokumentā vai kad tas ieiet jaunā stāvoklī. Tas ļauj jums norādīt stilu kopu, ar kuru animācija sāksies, neatkarīgi no elementa noklusējuma stiliem tā izveides brīdī vai pārejas sākumā.

Tas ir īpaši jaudīgs, ja to lieto kopā ar:

• @keyframes animācijas: Sākotnējā stāvokļa definēšana animācijām, kas varētu nesākties no 0% (vai from).
• CSS pārejas: Nodrošinot plūstošu pāreju no stāvokļa bez pārejas uz pārejas sākumu.

Kā @starting-style darbojas ar @keyframes

Lietojot @starting-style ar @keyframes animāciju, jūs varat norādīt stilus, kas jāpiemēro *pirms* animācijas pirmā atslēgkadra (parasti 0% vai from atslēgkadra) stāšanās spēkā. Tas ir īpaši noderīgi animācijām, kurām jāsākas no 'neredzama' vai 'sakļauta' stāvokļa, bet citādi elements varētu tikt renderēts ar redzamiem noklusējuma stiliem.

Sintakse ir vienkārša:

            
@keyframes fadeAndScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

.my-element {
  /* Other styles */
  animation: fadeAndScale 1s ease-out forwards;
}

@starting-style {
  opacity: 0;
  transform: scale(0.5);
}

            

              
                Copy
              
            
          

Šajā piemērā .my-element ir paredzēts, lai tas izgaistu un saruktu. Ja tas sākotnēji tiktu renderēts ar opacity: 1 un transform: scale(1), animācija, kas sākas no from { opacity: 1; transform: scale(1); }, šķistu tūlītēja, jo tā jau ir 'from' stāvoklī. Tomēr, izmantojot @starting-style, mēs skaidri norādām pārlūkprogrammai:

• Kad šī animācija sākas, elements vizuāli jāsagatavo ar opacity: 0.
• Un tā transformācijai jābūt scale(0.5).

Tas nodrošina, ka pat tad, ja elementa dabiskais stāvoklis ir atšķirīgs, animācija pareizi sāk savu secību no norādītajām sākuma vērtībām. Pārlūkprogramma efektīvi piemēro šīs @starting-style vērtības, pēc tam sāk from atslēgkadru no šīm vērtībām un turpina līdz to atslēgkadram. Ja animācijai ir iestatīts forwards, pēc animācijas pabeigšanas tiek saglabāts to atslēgkadra gala stāvoklis.

Kā @starting-style darbojas ar pārejām

Kad elementam tiek piemērota CSS pāreja, tā plūstoši interpolē starp elementa stiliem *pirms* pārejas un tā stiliem *pēc* pārejas. Izaicinājums rodas, kad stāvoklis, kas iedarbina pāreju, tiek pievienots dinamiski, vai kad vēlaties, lai pāreja sāktos no noteikta punkta, kas nav elementa noklusējuma renderētais stāvoklis.

Apsveriet pogu, kas palielinās, uzvirzot kursoru. Pēc noklusējuma pāreja plūstoši pārietu no pogas stāvokļa bez kursora uzvirzes uz tās stāvokli ar kursoru.

            
.my-button {
  transition: transform 0.3s ease;
}

.my-button:hover {
  transform: scale(1.1);
}

            

              
                Copy
              
            
          

Tas darbojas lieliski. Pāreja sākas no pogas noklusējuma transform: scale(1) uz transform: scale(1.1).

Tagad iedomājieties, ka vēlaties, lai poga *parādītos* ar palielināšanas efektu un pēc tam, uzvirzot kursoru, palielinātos *vēl vairāk*. Ja poga sākotnēji parādās pilnā izmērā, kursora uzvirzes pāreja ir vienkārša. Bet kas notiek, ja poga parādās, izmantojot ienākšanas un palielināšanas animāciju, un jūs vēlaties, lai kursora efekts arī būtu plūstoša palielināšanās no tās *pašreizējā* stāvokļa, nevis sākotnējā stāvokļa?

Šeit @starting-style kļūst nenovērtējams. Tas ļauj definēt pārejas sākotnējo stāvokli, kad šī pāreja tiek piemērota elementam, kas tiek renderēts pirmo reizi (piemēram, kad komponents ienāk DOM ar JavaScript vai lapas ielādi).

Pieņemsim, ka jums ir elements, kuram vajadzētu parādīties un palielināties, un pēc tam vēl vairāk palielināties, uzvirzot kursoru. Jūs varat izmantot animāciju ienākšanai un pēc tam pāreju kursora efektam:

            
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animated-card {
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInScale 0.5s ease-out forwards;
  transition: transform 0.3s ease;
}

.animated-card:hover {
  transform: scale(1.1);
}

/* Define the starting style for the initial entry animation */
@starting-style {
  opacity: 0;
  transform: scale(0.8);
}

            

              
                Copy
              
            
          

Šajā scenārijā @starting-style noteikums nodrošina, ka elements sāk renderēšanu ar opacity: 0 un transform: scale(0.8), kas atbilst fadeInScale animācijas from atslēgkadram. Kad animācija ir pabeigta un elements ir nostabilizējies ar opacity: 1 un transform: scale(1), pāreja kursora efektam plūstoši interpolē no šī stāvokļa uz transform: scale(1.1). Šeit @starting-style īpaši ietekmē animācijas sākotnējo piemērošanu, nodrošinot, ka tā sākas no vēlamā vizuālā punkta.

Būtiski, ka @starting-style ir piemērojams pārejām, kas tiek piemērotas elementiem, kuri ir tikko ievietoti dokumentā. Ja elements jau pastāv un tā stili mainās, iekļaujot pārejas īpašību, @starting-style tieši neietekmē šīs konkrētās pārejas sākumu, ja vien elements netiek arī renderēts no jauna.

Pārlūkprogrammu atbalsts un ieviešana

@starting-style at-rule ir salīdzinoši jauns papildinājums CSS specifikācijām. Attiecībā uz tā plašo pieņemšanu:

• Chrome un Edge ir lielisks atbalsts.
• Firefox ir labs atbalsts.
• Safari arī piedāvā labu atbalstu.

Vienmēr ir ieteicams pārbaudīt Can I Use, lai iegūtu jaunāko informāciju par pārlūkprogrammu saderību. Pārlūkprogrammām, kas neatbalsta @starting-style, animācija vai pāreja vienkārši atgriezīsies pie elementa esošajiem aprēķinātajiem stiliem izsaukšanas brīdī, kas varētu novest pie iepriekš aprakstītās ne tik ideālās uzvedības.

Labākās prakses un papildu lietojums

1. Konsekvence ir galvenais

Izmantojiet @starting-style, lai nodrošinātu, ka animācijas un pārejas sākas konsekventi, neatkarīgi no tā, kā elements tiek ievietots DOM vai kādi varētu būt tā sākotnējie aprēķinātie stili. Tas veicina paredzamāku un noslīpētāku lietotāja pieredzi.

2. Sakārtojiet savus atslēgkadru (keyframes)

Tā vietā, lai pievienotu sākotnējo stāvokli (piemēram, opacity: 0) katras nepieciešamās animācijas from atslēgkadram, jūs varat to definēt vienreiz @starting-style. Tas padara jūsu @keyframes noteikumus tīrākus un vairāk vērstus uz animācijas galveno progresu.

3. Sarežģītu stāvokļa maiņu apstrāde

Komponentiem, kas piedzīvo vairākas stāvokļa maiņas vai animācijas, @starting-style var palīdzēt pārvaldīt elementu sākotnējo izskatu, kad tie tiek pievienoti vai atjaunināti. Piemēram, vienas lapas aplikācijā (SPA), kur komponenti bieži tiek montēti un demontēti, ienākšanas animācijas sākuma stila definēšana ar @starting-style nodrošina plūstošu izskatu.

4. Veiktspējas apsvērumi

Lai gan @starting-style pats par sevi būtiski neietekmē veiktspēju, to dara animācijas un pārejas, kuras tas kontrolē. Vienmēr centieties animēt īpašības, kuras pārlūkprogramma var efektīvi apstrādāt, piemēram, transform un opacity. Ja iespējams, izvairieties no tādu īpašību kā width, height vai margin animēšanas, jo tās var izraisīt dārgas izkārtojuma pārrēķināšanas.

5. Rezerves varianti vecākām pārlūkprogrammām

Lai nodrošinātu saprātīgu pieredzi lietotājiem pārlūkprogrammās, kas neatbalsta @starting-style, jūs varat nodrošināt rezerves stilus. Tie ir elementa dabiskie sākotnējie stili, no kuriem animācija citādi sāktos. Daudzos gadījumos noklusējuma uzvedība bez @starting-style varētu būt pieņemama, ja animācija ir vienkārša.

Sarežģītākos scenārijos jums var būt nepieciešams JavaScript, lai noteiktu pārlūkprogrammas atbalstu vai piemērotu konkrētus sākotnējos stilus. Tomēr mērķis ar @starting-style ir samazināt nepieciešamību pēc šādām JavaScript iejaukšanās.

6. Globālā sasniedzamība un lokalizācija

Izstrādājot globālai auditorijai, animācijām jābūt iekļaujošām un tās nedrīkst balstīties uz valstij specifiskiem vizuāliem norādījumiem. @starting-style at-rule ir tehniska CSS funkcija, kas darbojas neatkarīgi no kultūras konteksta. Tās vērtība ir nodrošināt konsekventu tehnisko pamatu animācijām, kuras pēc tam var stilizēt un piemērot kultūras ziņā jutīgā veidā. Plūstošu animāciju nodrošināšana dažādās ierīcēs un tīkla apstākļos ir universāls mērķis tīmekļa izstrādātājiem, un @starting-style palīdz sasniegt šo konsekvenci.

Piemēra scenārijs: portfolio kartītes animācija

Ilustrēsim ar bieži sastopamu tīmekļa dizaina modeli: portfolio režģi, kurā katra kartīte tiek animēta redzamībā ar nelielu aizkavi un mērogošanas efektu.

Mērķis: Katrai kartītei vajadzētu parādīties un palielināties no 0.9 līdz 1, un katrai kartītei, parādoties režģī, būtu jāpiemēro neliela aizkave.

HTML:

            
<div class="portfolio-grid">
  <div class="portfolio-item">Card 1</div>
  <div class="portfolio-item">Card 2</div>
  <div class="portfolio-item">Card 3</div>
  <div class="portfolio-item">Card 4</div>
</div>

            

              
                Copy
              
            
          

CSS:

            
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.portfolio-item {
  background-color: #f0f0f0;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.2em;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  /* Default initial state */
  opacity: 0;
  transform: scale(0.9);

  /* Animation properties */
  animation: fadeInUpScale 0.6s ease-out forwards;
}

/* @keyframes for the animation */
@keyframes fadeInUpScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* @starting-style to define the initial state for the animation */
@starting-style {
  opacity: 0;
  transform: scale(0.9);
}

/* Applying delays to each item using :nth-child */
.portfolio-item:nth-child(1) {
  animation-delay: 0.1s;
}
.portfolio-item:nth-child(2) {
  animation-delay: 0.2s;
}
.portfolio-item:nth-child(3) {
  animation-delay: 0.3s;
}
.portfolio-item:nth-child(4) {
  animation-delay: 0.4s;
}

/* Adjusting keyframes to show the effect */
@keyframes fadeInUpScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

            

              
                Copy
              
            
          

Paskaidrojums:

1. .portfolio-item elementiem sākotnēji ir iestatīts opacity: 0 un transform: scale(0.9). Tas ir to stāvoklis pirms animācijas piemērošanas.
2. @keyframes fadeInUpScale definē animāciju no 0% (kas faktiski ir animācijas progresa sākuma stāvoklis) līdz 100%.
3. @starting-style noteikums skaidri deklarē, ka, piemērojot fadeInUpScale animāciju, tai jāsākas ar opacity: 0 un transform: scale(0.9). Tas nodrošina, ka pat tad, ja noklusējuma stili kaut kā mainītos, animācija joprojām sāktos no šī definētā punkta.
4. animation-delay īpašība tiek piemērota katram bērna elementam, izmantojot :nth-child selektorus, lai pakāpeniski parādītu kartītes, radot vizuāli pievilcīgāku secību.
5. Atslēgvārds forwards nodrošina, ka elements saglabā stilus no pēdējā atslēgkadra pēc animācijas pabeigšanas.

Bez @starting-style, ja pārlūkprogramma nepareizi interpretētu .portfolio-item sākotnējos aprēķinātos stilus kā animācijas sākuma punktu, animācija varētu sākties no cita, neparedzēta stāvokļa. @starting-style garantē, ka animācija pareizi sāk savu secību no paredzētajām vērtībām.

Noslēgums

@starting-style at-rule ir būtisks progress CSS animācijās un pārejās. Tas dod izstrādātājiem iespēju panākt precīzāku kontroli pār animēto elementu sākotnējiem stāvokļiem, kas noved pie plūstošākām, paredzamākām un profesionāli noslīpētām lietotāja saskarnēm. Izprotot un ieviešot @starting-style, jūs varat pacelt savas tīmekļa animācijas no labām līdz izcilām, nodrošinot konsekventu un saistošu pieredzi savai globālajai auditorijai plašā ierīču un pārlūkprogrammu spektrā. Izmantojiet šo jaudīgo rīku, lai radītu satriecoši animētas tīmekļa pieredzes, kas patiesi aizrauj lietotājus.