CSS @starting-style'i valdamine: Animatsiooni algolekute defineerimine

Veebiarenduse dünaamilises maailmas mängivad animatsioonid olulist rolli kasutajakogemuse parandamisel, visuaalse tagasiside andmisel ja kasutaja interaktsiooni suunamisel. Kuigi CSS-i animatsioonid ja üleminekud on märkimisväärselt arenenud, on animatsiooni algoleku täpne kontrollimine, eriti kui see käivitatakse kasutaja interaktsiooni või olekumuutuse tõttu, sageli esitanud peeneid väljakutseid. Siin tuleb appi @starting-style at-reegel, võimas CSS-i funktsioon, mis on loodud selle probleemi elegantseks lahendamiseks.

Väljakutse mõistmine: Animatsiooni esimene kaader

Traditsiooniliselt, kui elemendile rakendatakse animatsioon või üleminek, määratakse selle algolek elemendi hetkel arvutatud stiilide järgi *sel hetkel, kui animatsioon/üleminek algab*. See võib põhjustada ootamatuid visuaalseid hüppeid või ebakõlasid, eriti sellistes stsenaariumides nagu:

• Lehtede vahel navigeerimine: Kui komponent animeerub uuel lehel, võivad selle algstiilid olla kavandatust erinevad, kui seda hoolikalt ei käsitleta.
• Animatsioonide käivitamine hõljumisel või fookuses: Element võib enne animatsiooni sujuvat ülevõtmist korraks vilkuda või stiile muuta.
• JavaScripti kaudu rakendatud animatsioonid: Kui JavaScript lisab dünaamiliselt klassi, mis käivitab animatsiooni, mõjutab elemendi olek vahetult enne klassi lisamist animatsiooni algust.
• Animatsioonid, mis hõlmavad display: none või visibility: hidden: Elemendid, mida algselt ei renderdata, ei saa animatsioonides osaleda enne, kui need nähtavaks tehakse, mis toob kaasa järsu ilmumise sujuva sisenemise asemel.

Vaatleme lihtsat näidet: soovite, et element ilmuks ja suureneks. Kui elemendil on algselt opacity: 0 ja transform: scale(0.5) ning seejärel rakendatakse CSS-animatsioon, mis sihib opacity: 1 ja transform: scale(1), algab animatsioon oma praegusest olekust (nähtamatu ja vähendatud). See toimib ootuspäraselt. Aga mis siis, kui elemendil on algselt opacity: 1 ja transform: scale(1) ning seejärel rakendatakse animatsioon, mis peaks algama olekust opacity: 0 ja scale(0.5)? Ilma @starting-style'ita algaks animatsioon elemendi olemasolevast opacity: 1 ja scale(1) olekust, jättes kavandatud alguspunkti vahele.

Tutvustame @starting-style'i: Lahendus

@starting-style at-reegel pakub deklaratiivset viisi, kuidas määratleda CSS-i animatsioonide ja üleminekute algväärtused, mis rakendatakse elemendile, kui see esmakordselt dokumenti lisatakse või kui see siseneb uude olekusse. See võimaldab teil määrata stiilide komplekti, millega animatsioon algab, sõltumata elemendi vaikestiilidest selle loomise hetkel või ülemineku alguses.

See on eriti võimas, kui seda kasutatakse koos:

• @keyframes animatsioonid: Algoleku defineerimine animatsioonidele, mis ei pruugi alata 0% (või from) juurest.
• CSS-i üleminekud: Sujuva ülemineku tagamine mitte-üleminekuga olekust ülemineku algusesse.

Kuidas @starting-style töötab @keyframes'iga

Kui kasutate @starting-style'i koos @keyframes animatsiooniga, saate määrata stiilid, mida tuleks rakendada *enne*, kui animatsiooni esimene võtmekaader (tavaliselt 0% või from kaader) jõustub. See on eriti kasulik animatsioonide puhul, mis peavad algama 'nähtamatust' või 'kokkuvarisenud' olekust, kuid element võidakse muidu renderdada vaikimisi nähtavate stiilidega.

Süntaks on lihtne:

            
@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
              
            
          

Selles näites on .my-element mõeldud hääbuma ja kahanema. Kui see renderdataks algselt stiilidega opacity: 1 ja transform: scale(1), tunduks animatsioon, mis algab from { opacity: 1; transform: scale(1); } olekust, hetkeline, sest see on juba 'from' olekus. Kuid kasutades @starting-style'i, ütleme me brauserile selgesõnaliselt:

• Kui see animatsioon algab, tuleks element visuaalselt ette valmistada opacity: 0 abil.
• Ja selle transformatsioon peaks olema scale(0.5).

See tagab, et isegi kui elemendi loomulik olek on erinev, alustab animatsioon oma jada õigesti määratud algväärtustest. Brauser rakendab need @starting-style väärtused, seejärel alustab from võtmekaadrit nendest väärtustest ja jätkab to võtmekaadrini. Kui animatsioon on seatud forwards peale, säilitatakse to võtmekaadri lõppolek pärast animatsiooni lõppu.

Kuidas @starting-style töötab üleminekutega

Kui elemendile rakendatakse CSS-i üleminekut, interpoleerib see sujuvalt elemendi stiilide vahel *enne* ülemineku toimumist ja selle stiilide vahel *pärast* ülemineku toimumist. Väljakutse tekib siis, kui ülemineku käivitav olek lisatakse dünaamiliselt või kui soovite, et üleminek algaks konkreetsest punktist, mis ei ole elemendi vaikimisi renderdatud olek.

Vaatleme nuppu, mis hõljumisel suureneb. Vaikimisi liiguks üleminek sujuvalt nupu mitte-hõljumise olekust hõljumise olekusse.

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

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

            

              
                Copy
              
            
          

See toimib suurepäraselt. Üleminek algab nupu vaikimisi transform: scale(1) olekust ja liigub transform: scale(1.1) olekusse.

Nüüd kujutage ette, et soovite, et nupp animeeruks *sisse* suureneva efektiga ja seejärel hõljumisel suureneks *veelgi*. Kui nupp ilmub algselt täissuuruses, on hõljumise üleminek lihtne. Aga mis siis, kui nupp ilmub sissehääbuva ja suureneva animatsiooniga ning soovite, et ka hõljumisefekt oleks sujuv suurenemine selle *praegusest* olekust, mitte algsest olekust?

Siin muutub @starting-style hindamatuks. See laseb teil määratleda ülemineku algoleku, kui see üleminek rakendatakse elemendile, mida renderdatakse esimest korda (nt kui komponent siseneb DOM-i JavaScripti või lehe laadimise kaudu).

Oletame, et teil on element, mis peaks sisse hääbuma ja suurenema ning seejärel hõljumisel veelgi suurenema. Sisenemiseks saate kasutada animatsiooni ja hõljumisefekti jaoks üleminekut:

            
@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
              
            
          

Selles stsenaariumis tagab @starting-style reegel, et element alustab oma renderdamist olekust opacity: 0 ja transform: scale(0.8), mis vastab fadeInScale animatsiooni from võtmekaadrile. Kui animatsioon on lõppenud ja element on saavutanud oleku opacity: 1 ja transform: scale(1), interpoleerib hõljumisefekti üleminek sujuvalt sellest olekust olekusse transform: scale(1.1). @starting-style mõjutab siin spetsiifiliselt animatsiooni esialgset rakendamist, tagades, et see algab soovitud visuaalsest punktist.

Oluline on, et @starting-style on rakendatav üleminekutele, mida rakendatakse elementidele, mis on äsja dokumenti lisatud. Kui element on juba olemas ja selle stiilid muutuvad, et sisaldada ülemineku omadust, ei mõjuta @starting-style selle konkreetse ülemineku algust otseselt, välja arvatud juhul, kui elementi ka äsja renderdatakse.

Brauseri tugi ja rakendamine

@starting-style at-reegel on suhteliselt uus lisandus CSS-i spetsifikatsioonidele. Selle laialdase kasutuselevõtu seisuga:

• Chrome ja Edge pakuvad suurepärast tuge.
• Firefoxil on hea tugi.
• Safari pakub samuti head tuge.

Alati on soovitatav kontrollida Can I Use lehelt kõige ajakohasemat teavet brauserite ühilduvuse kohta. Brauserite puhul, mis ei toeta @starting-style'i, langeb animatsioon või üleminek lihtsalt tagasi elemendi olemasolevatele arvutatud stiilidele käivitamise hetkel, mis võib põhjustada varem kirjeldatud vähem ideaalset käitumist.

Parimad praktikad ja edasijõudnud kasutus

1. Järjepidevus on võti

Kasutage @starting-style'i, et tagada animatsioonide ja üleminekute järjepidev algus, sõltumata sellest, kuidas element DOM-i lisatakse või millised võivad olla selle esialgsed arvutatud stiilid. See edendab prognoositavamat ja lihvitumat kasutajakogemust.

2. Korrastage oma võtmekaadreid

Selle asemel, et lisada algolek (nt opacity: 0) iga animatsiooni from võtmekaadrisse, mis seda vajab, saate selle defineerida ühe korra @starting-style'is. See muudab teie @keyframes reeglid puhtamaks ja keskendunumaks animatsiooni põhilisele kulgemisele.

3. Keerukate olekumuutuste käsitlemine

Komponentide puhul, mis läbivad mitmeid olekumuutusi või animatsioone, aitab @starting-style hallata elementide esialgset välimust nende lisamisel või värskendamisel. Näiteks ühe lehe rakenduses (SPA), kus komponente sageli paigaldatakse ja eemaldatakse, tagab sisenemisanimatsiooni algstiili defineerimine @starting-style'iga sujuva ilmumise.

4. Jõudlusega seotud kaalutlused

Kuigi @starting-style iseenesest ei mõjuta jõudlust, teevad seda animatsioonid ja üleminekud, mida see kontrollib. Püüdke alati animeerida omadusi, mida brauser saab tõhusalt käsitleda, näiteks transform ja opacity. Vältige omaduste nagu width, height või margin animeerimist, kui võimalik, kuna need võivad käivitada kulukaid paigutuse ümberarvutusi.

5. Tagavaralahendused vanematele brauseritele

Et tagada mõistlik kogemus kasutajatele brauserites, mis ei toeta @starting-style'i, saate pakkuda tagavarastiile. Need on elemendi loomulikud algstiilid, millest animatsioon muidu algaks. Paljudel juhtudel võib vaikimisi käitumine ilma @starting-style'ita olla vastuvõetav, kui animatsioon on lihtne.

Keerukamate stsenaariumide puhul võib vaja minna JavaScripti, et tuvastada brauseri tuge või rakendada spetsiifilisi algstiile. Kuid @starting-style'i eesmärk on vähendada vajadust selliste JavaScripti sekkumiste järele.

6. Globaalne ulatus ja lokaliseerimine

Globaalsele sihtrühmale arendades peaksid animatsioonid olema kaasavad ega tohiks tugineda riigispetsiifilistele visuaalsetele vihjele. @starting-style at-reegel on tehniline CSS-i funktsioon, mis toimib kultuurilisest kontekstist sõltumatult. Selle väärtus seisneb järjepideva tehnilise aluse pakkumises animatsioonidele, mida saab seejärel kujundada ja rakendada kultuuritundlikul viisil. Sujuvate animatsioonide tagamine erinevates seadmetes ja võrgutingimustes on veebiarendajate universaalne eesmärk ning @starting-style aitab seda järjepidevust saavutada.

Näidisstsenaarium: Portfoolio kaardi animatsioon

Illustreerime seda levinud veebidisaini mustriga: portfoolio ruudustik, kus iga kaart animeerub nähtavale peene viivituse ja skaleerimise efektiga.

Eesmärk: Iga kaart peaks sisse hääbuma ja suurenema skaalalt 0.9 kuni 1 ning igale kaardile tuleks rakendada väike viivitus nende ilmumisel ruudustikus.

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
              
            
          

Selgitus:

1. .portfolio-item elemendid on algselt seatud olekusse opacity: 0 ja transform: scale(0.9). See on nende olek enne animatsiooni rakendamist.
2. @keyframes fadeInUpScale defineerib animatsiooni 0%-st (mis on tegelikult animatsiooni edenemise algolek) kuni 100%-ni.
3. @starting-style reegel deklareerib selgesõnaliselt, et kui fadeInUpScale animatsioon rakendatakse, peaks see algama olekust opacity: 0 ja transform: scale(0.9). See tagab, et isegi kui vaikestiilid mingil moel muutuksid, algaks animatsioon ikkagi sellest määratletud punktist.
4. animation-delay omadus rakendatakse igale lapselemendile, kasutades :nth-child selektoreid, et kaartide ilmumist ajatada, luues visuaalselt meeldivama jada.
5. forwards võtmesõna tagab, et element säilitab viimase võtmekaadri stiilid pärast animatsiooni lõppu.

Ilma @starting-style'ita, kui brauser ei tõlgendaks .portfolio-item'i esialgseid arvutatud stiile õigesti animatsiooni alguspunktina, võiks animatsioon alata erinevast, soovimatust olekust. @starting-style garanteerib, et animatsioon alustab oma jada õigesti kavandatud väärtustest.

Kokkuvõte

@starting-style at-reegel on märkimisväärne edasiminek CSS-i animatsioonides ja üleminekutes. See annab arendajatele võimaluse saavutada täpsemat kontrolli animeeritud elementide algolekute üle, mis viib sujuvamate, prognoositavamate ja professionaalselt lihvitud kasutajaliidesteni. Mõistes ja rakendades @starting-style'i, saate tõsta oma veebianimatsioonid heast suurepäraseks, tagades oma globaalsele sihtrühmale järjepideva ja kaasahaarava kogemuse laias valikus seadmetes ja brauserites. Võtke see võimas tööriist omaks, et luua vapustavalt animeeritud veebikogemusi, mis kasutajaid tõeliselt paeluvad.