Pārejas kavēšanās - CSS-triki

transition-delayĪpašumu, parasti izmanto kā daļu no transitionsaīsinājumus, tiek izmantota, lai noteiktu laika periodu atlikt sākumu pāreju.

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

Vērtība var būt viena no šīm:

• Derīga laika vērtība, kas noteikta sekundēs vai milisekundēs, piemēram, 1.3svai125ms
• Ar komatiem atdalīts laika vērtību saraksts, lai noteiktu atsevišķas aizkaves vērtības vairākām pārejām vienam elementam, piem 1s background-color, 350ms transform

Noklusējuma vērtība transition-delayir 0s, kas nozīmē, ka kavēšanās nenotiks un pāreja sāksies nekavējoties. Laika vērtību precīzākai laika noteikšanai var izteikt kā decimāldaļu skaitli.

Ja pārejas aizkaves vērtība ir negatīva, tā izraisīs pārejas sākšanos nekavējoties (bez kavēšanās), tomēr pāreja sāksies procesa gaitā, it kā tā jau būtu sākusies.

Šis pildspalva parāda kursora efektu lodziņā, kurā tiek izmantota transition-delayvērtība 2sar pārejas ilgumu 1s:

Skatiet
CSS-Tricks (@ css-tricks) pildspalvas pārejas aizkaves demonstrāciju
vietnē CodePen.

Tagad salīdziniet to ar šo demonstrāciju, kuras aizkave -1sun ilgums ir 3s:

Skatiet
CSS-Tricks (@ css-tricks)
CSP -Tricks Pen Negative pārejas aizkaves demonstrāciju .

Ievērojiet, ka otrajā piemērā ir redzamas tikai pēdējās divas trešdaļas faktiskās pārejas un nav kavēšanās. Negatīvā vērtība noņem kavēšanos un efektīvi samazina ilgumu.

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-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; )

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

Parasti izmantošanas gadījums ir pāreju posms:

Skatiet
Chris Coyier (@chriscoyier) pildspalvu dalītās animācijas
vietnē CodePen.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome	Firefox	IE	Mala	Safari
4 *	5 *	10	12	5,1 *

Mobilais / planšetdators

Android Chrome	Android Firefox	Android	iOS Safari
88	85	2,1 *	6,0–6,1 *