Perėjimo vėlavimas - CSS-gudrybės

Turinys

transition-delayNuosavybė, paprastai naudojamas kaip dalis transitionsutrumpinta, yra naudojamas apibrėžti, kiek laiko atidėti perėjimą pradžios.

.delay-me ( transition-delay: 0.25s; )

Vertė gali būti viena iš šių:

Tinkama laiko vertė, apibrėžta sekundėmis arba milisekundėmis, pvz., 1.3sArba125ms
Kableliais atskirtas laiko verčių sąrašas, skirtas atskiroms uždelsimo reikšmėms apibrėžti keliems vieno elemento perėjimams, pvz 1s background-color, 350ms transform

Numatytoji reikšmė transition-delayyra 0s, tai reiškia, kad vėlavimas neįvyks, o perėjimas prasidės iškart. Laiko reikšmę galima išreikšti dešimtainiu skaičiumi, kad būtų galima tiksliau nustatyti laiką.

Kai perėjimo vėlavimo vertė yra neigiama, perėjimas prasidės nedelsiant (be vėlavimo), tačiau perėjimas prasidės proceso metu, tarsi jis jau būtų prasidėjęs.

Šiame rašiklyje rodomas žymėjimas ant langelio, kuriame naudojama transition-delayreikšmė, 2skurios perėjimo trukmė yra 1s:

Peržiūrėkite
„CSS-Tricks“ (@ css-tricks) „ Pen Transition delay“ demonstracinę versiją „
CodePen“.

Dabar palyginkite tai su šia demonstracija, kurios vėlavimas -1sir trukmė 3s:

Peržiūrėkite
CSS-Tricks (@ css-tricks) „Pen Negative“ perėjimo atidėjimo demonstraciją „
CodePen“.

Atkreipkite dėmesį, kad antrame pavyzdyje matomi tik paskutiniai du trečdaliai faktinio perėjimo ir nėra vėlavimo. Neigiama vertė pašalina vėlavimą ir efektyviai sumažina trukmę.

Norint suderinti visas palaikomas naršykles, reikalingi tiekėjo priešdėliai, o standartinė sintaksė paskelbta paskutine:

.example ( -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

IE10 (pirmoji palaikoma IE versija transition-delay) nereikia -ms-prefikso.

Dažniausiai naudojamas atvejis yra perėjimo etapai:

Žr
. Chriso Coyier'io (@chriscoyier)
„Pen Staggered Animations“ svetainėje „CodePen“.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.