HTML5 - perėjimai

Perėjimai priklauso naujai efektų serijai, kuri yra įtraukta į HTML5 ir tai galima koreguoti CSS3Anksčiau tokio tipo efektus turėjo atlikti „Javascript“, naudodamas vieną iš daugybės galimų bibliotekų ir karkasų („Mootools“, „Jquery“ ir kt.), Tačiau kai buvo įvestas naujas standartas, tokie efektai buvo įtraukti, pvz., Perėjimai, animacijos, transformacijos. …
Naudojant perėjimus
Prieš matydami, kaip naudoti perėjimą, turime žinoti, kas tai yra. Tai žinome, kai taikome nuosavybės pakeitimą : slinkite užvedus pelę virš elemento, ji iškart įgauna stilių, priskirtą pelės virš jo, perėjimas yra ne kas kita, kaip kontrolė, kaip tas pakeitimas bus atliktas, tai yra, pakeitimo trukmė, greitis kuri bus atlikta, kad būtų pasiektas efektas, tarsi mišinys tarp senosios ir naujosios būsenos.
Taigi galime apibendrinti, kad perėjimas yra perėjimas iš vienos būsenos į kitą HTML dokumente ir visos savybės, kuriomis galima atlikti šį pakeitimą, kitame paveikslėlyje matome pradinę ir galutinę būsenas, perėjimas yra tai, kas vyksta Tarp abiejų.
DIDELIS
Perėjimo savybės
Pažvelkime į savybes ir atributus, kuriuos galime naudoti pereidami:

• perėjimo uždelsimas: Nurodo laiko vieneto vėlavimą, po kurio bus pradėta taikyti efektų programa.
• pereinamojo laikotarpio trukmė: Nurodo laiką, per kurį turi būti atliktas perėjimas.
• perėjimo nuosavybė: Nurodo, kuriai nuosavybei turi būti taikomas perėjimas.
• pereinamojo laiko funkcija: Nurodo būdą, kaip bus apdorojamos tarpinės vertės atliekant perėjimą.
• perėjimas: Tai yra spartusis klavišas, kuriuo galime pritaikyti visas perėjimo ypatybes vienoje CSS deklaracijoje. Tai galima apibendrinti taip: perėjimas:

Turime tai pabrėžti perėjimas-uždelsimas Y pereinamojo laikotarpio kaip laiko vienetus naudokite kaip vertes, todėl jie turi būti nurodyti su s sekundžių arba ms mili sekundžių.
Pažvelkime į pavyzdį, kaip pereiti prie elemento HTML5, pažiūrėkime šį kodą:

 Pavyzdys
Yra daug įvairių vaisių - vien tik bananų yra daugiau nei 500 veislių. Kai pridėsime daugybę obuolių, apelsinų ir kitų gerai žinomų vaisių rūšių, susidursime su tūkstančiais pasirinkimų.

Kaip matome, įgyvendinome skirtingas perėjimo elemento savybes naudodami priešdėlį -interneto rinkinys, tai užtikrina, kad tai bus įvykdyta naršyklėms „Chrome“ Y „Safari“, juos įgyvendinti „Firefox“ Y Opera taip pat turime įtraukti priešdėlius -moz ir -o.
Taip pat galime pastebėti, kad nustatėme uždelsimas 100 ms, o tai reiškia, kad jis turės nedidelį vėlavimą prieš pradedant perėjimą, tada visa efekto trukmė turėtų trukti 500 ms, kas nustatyta trukmės.
Pažiūrėkime vaizdą su visomis efekto fazėmis:
DIDELIS
Kaip matome, perėjimas leidžia efektą taikyti palaipsniui per nurodytą laiką.
Tuo baigiame vadovėlį, kaip pritaikyti perėjimo efektą elementui HTML5, turime tęsti praktiką, kol taps natūralu įdėti reikiamą kodą, kad mūsų dokumentai ir puslapiai būtų dinamiškesni.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką