Pāreja - CSS-triki | CSS almanahs 2025

transitionĪpašums ir saīsinājums īpašums, kas izmantots, lai pārstāvētu līdz četriem pārejas saistītās parastais raksts īpašībām:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Šīs pārejas īpašības ļauj elementiem noteiktā laikā mainīt vērtības, animējot rekvizītu izmaiņas, nevis liekot tām notikt uzreiz. Šeit ir vienkāršs piemērs, kas elementa fona krāsu pārvieto uz: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Kad divvirs būs pāri sekundei, pārejiet no sarkanās uz zaļo, kamēr poga būs pāri. Šeit ir tieša šādas pārejas demonstrācija:

Skatiet Louis Lazaris (@impressivewebs) Pen Transition Demo vietnē CodePen.

Jūs varat norādīt konkrētu rekvizītu, kā mums ir iepriekš, vai izmantot vērtību “visi”, lai atsauktos uz pārejas rekvizītiem.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

Šajā iepriekš minētajā piemērā gan fons, gan polsterējums tiks pārsūtīti, pateicoties transition-propertystenogrammas daļai norādītajai vērtībai “visi” .

Varat komatēt atsevišķas vērtību kopas, lai veiktu dažādas pārejas uz dažādiem rekvizītiem:

div ( transition: background 0.2s ease, padding 0.8s linear; )

Lielākoties vērtību secībai nav nozīmes - ja vien nav norādīta kavēšanās. Ja norādāt kavēšanos, vispirms jānorāda ilgums. Pirmā vērtība, ko pārlūkprogramma atzīst par derīgu laika vērtību, vienmēr apzīmē ilgumu. Visas turpmākās derīgās laika vērtības tiks parsētas kā aizkave.

Dažus rekvizītus nevar pārvietot, jo tie nav animējami rekvizīti. Pilnu animējamo īpašību sarakstu skatiet specifikācijā.

Norādot pāreju pašā elementā, jūs definējat pāreju, kas notiks abos virzienos. Tas ir, kad stili tiek mainīti (piem., Kad kursors ir ieslēgts), to īpašības mainīsies, un, kad stili mainīsies atpakaļ (piem., Kad kursors ir izslēgts), tie pāriet. Piemēram, šādas demonstrācijas pārejas uz kursora, bet ne uz kursora:

Skatiet Louis Lazaris (@impressivewebs) Pen zohgt vietnē CodePen.

Tas notiek tāpēc, ka pāreja ir pārvietota uz :hoverstāvokļa selektoru un selektorā nav atbilstošas pārejas, kas mērķētu uz elementu tieši bez :hoverstāvokļa.

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: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

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