Pārejas laika funkcija - CSS-triki

transition-timing-functionĪpašumu, parasti izmanto kā daļu no transitionsaīsinājumus, tiek izmantots, lai definētu funkciju, kas apraksta, kā pāreja notiks virs tās ilgumu, kas ļauj pāriet uz izmaiņu ātrumu, tā kursa laikā.

.example ( transition-timing-function: ease-out; )

Šīs laika funkcijas parasti sauc par atvieglojošām funkcijām, un tās var definēt, izmantojot iepriekš noteiktu atslēgvārda vērtību, pakāpiena funkciju vai kubisko Bezjē līkni.

Iepriekš atļautās atslēgvārda vērtības ir šādas:

vieglums
lineārs
vieglums
vieglums-out
vieglums-ārā
solis-sākums
solis-beigas

Dažām vērtībām efekts var nebūt tik acīmredzams, ja pārejas ilgums nav iestatīts uz lielāku vērtību.

Katram no iepriekš definētajiem atslēgvārdiem ir ekvivalenta kubiskā Bézier līknes vērtība vai līdzvērtīga pakāpiena funkcijas vērtība. Piemēram, šādas divas laika funkcijas vērtības būtu līdzvērtīgas viena otrai:

.example ( transition-timing-function: ease-out; ) .example-2 ( transition-timing-function: cubic-bezier(0, 0, 0.58, 1); )

Tāpat kā šādi divi:

.example ( transition-timing-function: step-start; ) .example-2 ( transition-timing-function: steps(1, start); )

Izmantojot soļus () un Besjē līknes

steps()Funkcija ļauj norādīt intervālus laika funkciju. Tas aizņem vienu vai divus parametrus, kas atdalīti ar komatu: pozitīvs vesels skaitlis un papildu vērtību, vai nu startvai end. Ja nav iekļauts neviens otrais parametrs, tas pēc noklusējuma būs end.

Lai saprastu pakāpeniskās funkcijas, šeit ir demonstrācija, kas tiek steps(4, start)izmantota lodziņā kreisajā pusē un steps(4, end)lodziņā labajā pusē (virziet kursoru virs lodziņa vai atkārtoti ielādējiet rāmi, lai skatītu pārejas):

Pārbaudiet šo pildspalvu!

Kad startir norādīts, vērtību maiņa notiek katra intervāla sākumā, savukārt endvērtību maiņa notiek katra intervāla beigās.

Detalizēts Besjē līknes vērtību apskats pārsniedz šīs atsauces darbības jomu, tomēr skatiet atsauces saistīto saišu sadaļā rīkiem, kas vizuāli parāda, kā šīs vērtības darbojas.

Lai nodrošinātu saderību visās atbalstītajās pārlūkprogrammās, ir nepieciešami piegādātāja prefiksi, un standarta sintakse tiek pasludināta par pēdējo:

.example ( -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; )

IE10 (pirmā stabilā IE versija, kas atbalsta transition-timing-function) -ms-prefikss nav nepieciešams .