CSS @starting-style įvaldymas: animacijos pradinių būsenų apibrėžimas

Dinamiškame interneto svetainių kūrimo pasaulyje animacijos atlieka lemiamą vaidmenį gerinant vartotojo patirtį, teikiant vaizdinį grįžtamąjį ryšį ir nukreipiant vartotojo sąveiką. Nors CSS animacijos ir perėjimai labai patobulėjo, tikslus animacijos pradinės būsenos valdymas, ypač kai ją sukelia vartotojo sąveika ar būsenos pasikeitimas, dažnai kėlė subtilių iššūkių. Pristatome @starting-style taisyklę – galingą CSS funkciją, sukurtą elegantiškai išspręsti šią problemą.

Iššūkio supratimas: pirmasis animacijos kadras

Tradiciškai, kai elementui pritaikoma animacija ar perėjimas, jo pradinę būseną lemia esami apskaičiuoti elemento stiliai *tą akimirką, kai animacija/perėjimas prasideda*. Tai gali sukelti netikėtus vizualinius šuolius ar neatitikimus, ypač tokiose situacijose kaip:

• Naršymas tarp puslapių: Kai komponentas animuojamas naujame puslapyje, jo pradiniai stiliai gali skirtis nuo numatytųjų, jei nebus atidžiai tvarkomi.
• Animacijų aktyvavimas užvedus pelę ar sufokusavus: Elementas gali turėti stilių, kurie trumpam sumirksi ar pasikeičia, prieš animacijai sklandžiai perimant valdymą.
• Animacijos, pritaikytos per JavaScript: Jei JavaScript dinamiškai prideda klasę, kuri aktyvuoja animaciją, elemento būsena prieš pat pridedant klasę paveikia animacijos pradžią.
• Animacijos, apimančios display: none arba visibility: hidden: Elementai, kurie iš pradžių neatvaizduojami, negali dalyvauti animacijose, kol netampa matomi, o tai lemia staigų atsiradimą, o ne sklandų įėjimą.

Apsvarstykite paprastą pavyzdį: norite, kad elementas palaipsniui atsirastų ir padidėtų. Jei elementas iš pradžių turi opacity: 0 ir transform: scale(0.5), o tada pritaikoma CSS animacija, kurios tikslas yra opacity: 1 ir transform: scale(1), animacija prasideda nuo dabartinės būsenos (nematomas ir sumažintas). Tai veikia kaip tikėtasi. Tačiau kas, jei elementas iš pradžių turi opacity: 1 ir transform: scale(1), o tada pritaikoma animacija, kuri turėtų prasidėti nuo opacity: 0 ir scale(0.5)? Be @starting-style, animacija prasidėtų nuo elemento esamų opacity: 1 ir scale(1), faktiškai praleidžiant numatytą pradinį tašką.

Pristatome @starting-style: sprendimas

@starting-style taisyklė suteikia deklaratyvų būdą apibrėžti pradines CSS animacijų ir perėjimų vertes, kurios taikomos elementui, kai jis pirmą kartą įtraukiamas į dokumentą arba kai pereina į naują būseną. Ji leidžia nurodyti stilių rinkinį, su kuriuo prasidės animacija, nepriklausomai nuo numatytųjų elemento stilių jo sukūrimo metu ar perėjimo pradžioje.

Ji ypač galinga, kai naudojama kartu su:

• @keyframes animacijos: Apibrėžia pradinę būseną animacijoms, kurios gali neprasidėti nuo 0% (arba from).
• CSS perėjimai: Užtikrina sklandų perėjimą iš būsenos be perėjimo į perėjimo pradžią.

Kaip @starting-style veikia su @keyframes

Kai naudojate @starting-style su @keyframes animacija, galite nurodyti stilius, kurie turėtų būti pritaikyti *prieš* įsigaliojant pirmajam animacijos rakto kadrui (paprastai 0% arba from kadrui). Tai ypač naudinga animacijoms, kurios turi prasidėti nuo „nematomos“ ar „sutrauktos“ būsenos, tačiau elementas kitaip galėtų būti atvaizduotas su numatytais matomais stiliais.

Sintaksė yra paprasta:

            
@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
              
            
          

Šiame pavyzdyje .my-element skirtas palaipsniui išnykti ir susitraukti. Jei jis iš pradžių būtų atvaizduotas su opacity: 1 ir transform: scale(1), animacija, pradedama nuo from { opacity: 1; transform: scale(1); }, atrodytų momentinė, nes ji jau yra „from“ būsenoje. Tačiau, naudodami @starting-style, mes aiškiai nurodome naršyklei:

• Kai ši animacija prasideda, elementas turėtų būti vizualiai paruoštas su opacity: 0.
• Ir jo transformacija turėtų būti scale(0.5).

Tai užtikrina, kad net jei elemento natūrali būsena yra kitokia, animacija teisingai pradeda savo seką nuo nurodytų pradinių verčių. Naršyklė efektyviai pritaiko šias @starting-style vertes, tada pradeda from rakto kadrą nuo tų verčių ir pereina prie to rakto kadro. Jei animacija nustatyta į forwards, galutinė to rakto kadro būsena išlaikoma pasibaigus animacijai.

Kaip @starting-style veikia su perėjimais

Kai elementui pritaikomas CSS perėjimas, jis sklandžiai interpoliuoja tarp elemento stilių *prieš* perėjimą ir jo stilių *po* perėjimo. Iššūkis kyla, kai būsena, kuri sukelia perėjimą, yra pridedama dinamiškai, arba kai norite, kad perėjimas prasidėtų nuo konkretaus taško, kuris nėra numatytoji elemento atvaizduota būsena.

Apsvarstykite mygtuką, kuris padidėja užvedus pelę. Pagal numatytuosius nustatymus perėjimas sklandžiai pereitų iš mygtuko būsenos be pelės užvedimo į būseną su pelės užvedimu.

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

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

            

              
                Copy
              
            
          

Tai veikia puikiai. Perėjimas prasideda nuo numatytosios mygtuko transform: scale(1) iki transform: scale(1.1).

Dabar įsivaizduokite, kad norite, kad mygtukas animuotųsi *įeinant* su padidinimo efektu, o užvedus pelę – padidėtų *dar labiau*. Jei mygtukas iš pradžių atsiranda visu dydžiu, užvedimo perėjimas yra paprastas. Bet kas, jei mygtukas atsiranda naudojant išnykimo ir padidinimo animaciją, ir norite, kad užvedimo efektas taip pat būtų sklandus padidėjimas nuo jo *dabartinės* būsenos, o ne nuo pradinės?

Štai kur @starting-style tampa neįkainojama. Ji leidžia apibrėžti pradinę perėjimo būseną, kai tas perėjimas taikomas elementui, kuris atvaizduojamas pirmą kartą (pvz., kai komponentas patenka į DOM per JavaScript arba įkeliant puslapį).

Tarkime, turite elementą, kuris turėtų išnykti ir padidėti, kad atsirastų matomas, o tada dar labiau padidėti užvedus pelę. Galite naudoti animaciją įėjimui, o tada perėjimą užvedimo efektui:

            
@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
              
            
          

Šiame scenarijuje @starting-style taisyklė užtikrina, kad elementas pradeda savo atvaizdavimą su opacity: 0 ir transform: scale(0.8), atitinkančiu fadeInScale animacijos from rakto kadrą. Kai animacija baigiasi ir elementas nusistovi ties opacity: 1 ir transform: scale(1), perėjimas užvedimo efektui sklandžiai interpoliuoja iš šios būsenos į transform: scale(1.1). @starting-style čia konkrečiai veikia pradinį animacijos pritaikymą, užtikrinant, kad ji prasidėtų nuo norimo vizualinio taško.

Svarbiausia, kad @starting-style taikoma perėjimams, kurie pritaikomi naujai į dokumentą įterptiems elementams. Jei elementas jau egzistuoja ir jo stiliai pasikeičia, įtraukiant perėjimo savybę, @starting-style tiesiogiai neveikia to konkretaus perėjimo pradžios, nebent elementas taip pat yra naujai atvaizduojamas.

Naršyklių palaikymas ir įgyvendinimas

@starting-style taisyklė yra gana naujas CSS specifikacijų papildymas. Nuo jos plataus pritaikymo:

• Chrome ir Edge turi puikų palaikymą.
• Firefox turi gerą palaikymą.
• Safari taip pat siūlo gerą palaikymą.

Visada patartina patikrinti Can I Use, kad gautumėte naujausią informaciją apie naršyklių suderinamumą. Naršyklėse, kurios nepalaiko @starting-style, animacija ar perėjimas tiesiog grįš prie esamų elemento apskaičiuotų stilių iškvietimo metu, o tai gali lemti anksčiau aprašytą nepageidaujamą elgesį.

Geriausios praktikos ir pažangus naudojimas

1. Svarbiausia – nuoseklumas

Naudokite @starting-style, kad užtikrintumėte, jog animacijos ir perėjimai prasidėtų nuosekliai, nepriklausomai nuo to, kaip elementas įtraukiamas į DOM arba kokie yra jo pradiniai apskaičiuoti stiliai. Tai skatina nuspėjamesnę ir labiau nugludintą vartotojo patirtį.

2. Sutvarkykite savo rakto kadrus

Užuot pridėję pradinę būseną (pvz., opacity: 0) į kiekvienos animacijos, kuriai to reikia, from rakto kadrą, galite ją vieną kartą apibrėžti @starting-style. Dėl to jūsų @keyframes taisyklės tampa švaresnės ir labiau orientuotos į pagrindinę animacijos eigą.

3. Sudėtingų būsenos pasikeitimų valdymas

Komponentams, kurie patiria kelis būsenos pasikeitimus ar animacijas, @starting-style gali padėti valdyti pradinę elementų išvaizdą, kai jie pridedami ar atnaujinami. Pavyzdžiui, vieno puslapio programoje (SPA), kur komponentai dažnai montuojami ir išmontuojami, įėjimo animacijos pradinio stiliaus apibrėžimas su @starting-style užtikrina sklandų atsiradimą.

4. Našumo aspektai

Nors pats @starting-style savaime neturi įtakos našumui, jo valdomos animacijos ir perėjimai turi. Visada stenkitės animuoti savybes, kurias naršyklė gali efektyviai apdoroti, pavyzdžiui, transform ir opacity. Jei įmanoma, venkite animuoti tokias savybes kaip width, height ar margin, nes jos gali sukelti brangius išdėstymo perskaičiavimus.

5. Atsarginiai variantai senesnėms naršyklėms

Siekiant užtikrinti priimtiną patirtį vartotojams, naudojantiems naršykles, kurios nepalaiko @starting-style, galite pateikti atsarginius stilius. Tai yra natūralūs pradiniai elemento stiliai, nuo kurių animacija kitaip prasidėtų. Daugeliu atvejų numatytasis elgesys be @starting-style gali būti priimtinas, jei animacija yra paprasta.

Sudėtingesniems scenarijams gali prireikti JavaScript, kad būtų galima nustatyti naršyklės palaikymą arba pritaikyti konkrečius pradinius stilius. Tačiau @starting-style tikslas yra sumažinti tokių JavaScript intervencijų poreikį.

6. Pasaulinis pasiekiamumas ir lokalizacija

Kuriant pasaulinei auditorijai, animacijos turėtų būti įtraukios ir nepasikliauti konkrečiai šaliai būdingais vaizdiniais ženklais. @starting-style taisyklė yra techninė CSS funkcija, veikianti nepriklausomai nuo kultūrinio konteksto. Jos vertė slypi teikiant nuoseklų techninį pagrindą animacijoms, kurias vėliau galima stilizuoti ir taikyti atsižvelgiant į kultūrinius ypatumus. Užtikrinti sklandžias animacijas skirtinguose įrenginiuose ir tinklo sąlygomis yra universalus interneto kūrėjų tikslas, o @starting-style padeda pasiekti šį nuoseklumą.

Pavyzdinis scenarijus: portfolio kortelės animacija

Pailiustruokime tai įprastu interneto dizaino pavyzdžiu: portfolio tinkleliu, kuriame kiekviena kortelė animuojasi į vaizdą su nedideliu vėlavimu ir mastelio keitimo efektu.

Tikslas: Kiekviena kortelė turėtų palaipsniui atsirasti ir padidėti nuo 0.9 iki 1, o kiekvienai kortelei tinklelyje turėtų būti pritaikytas nedidelis vėlavimas.

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
              
            
          

Paaiškinimas:

1. .portfolio-item elementams iš pradžių nustatyta opacity: 0 ir transform: scale(0.9). Tai yra jų būsena prieš pritaikant animaciją.
2. @keyframes fadeInUpScale apibrėžia animaciją nuo 0% (kas iš esmės yra animacijos eigos pradinė būsena) iki 100%.
3. @starting-style taisyklė aiškiai deklaruoja, kad pritaikius fadeInUpScale animaciją, ji turėtų prasidėti nuo opacity: 0 ir transform: scale(0.9). Tai užtikrina, kad net jei numatytieji stiliai kažkaip pasikeistų, animacija vis tiek prasidėtų nuo šio apibrėžto taško.
4. Savybė animation-delay yra pritaikoma kiekvienam vaikui naudojant :nth-child selektorius, kad kortelių atsiradimas būtų išdėstytas laike, sukuriant vizualiai patrauklesnę seką.
5. Raktažodis forwards užtikrina, kad pasibaigus animacijai elementas išlaiko paskutinio rakto kadro stilius.

Be @starting-style, jei naršyklė neteisingai interpretuotų pradinius apskaičiuotus .portfolio-item stilius kaip animacijos pradžios tašką, animacija galėtų prasidėti nuo kitos, nenumatytos būsenos. @starting-style garantuoja, kad animacija teisingai pradeda savo seką nuo numatytų verčių.

Išvada

@starting-style taisyklė yra reikšmingas CSS animacijų ir perėjimų patobulinimas. Ji suteikia kūrėjams galimybę tiksliau kontroliuoti animuotų elementų pradines būsenas, o tai lemia sklandesnes, labiau nuspėjamas ir profesionaliai nugludintas vartotojo sąsajas. Suprasdami ir įgyvendindami @starting-style, galite pakelti savo interneto animacijas nuo gerų iki išskirtinių, užtikrindami nuoseklią ir įtraukiančią patirtį savo pasaulinei auditorijai įvairiuose įrenginiuose ir naršyklėse. Pasinaudokite šiuo galingu įrankiu, kad sukurtumėte stulbinančiai animuotas interneto patirtis, kurios tikrai sužavės vartotojus.