CSS Transitions explicat

Cel mai simplu (și cel mai simplu) mod de a vă anima componentele este prin CSS Transitions. În acest articol, veți afla cum funcționează tranzițiile CSS și cum să realizați animații cu acesta.

O tranziție are loc atunci când o proprietate CSS se schimbă de la o valoare la alta pe o perioadă de timp.

Puteți crea tranziții CSS cu transition proprietate:

.selector { 
  transition: property duration transition-timing-function delay; 
}

transition proprietatea este o prescurtare a patru proprietăți CSS, transition-property, transition-duration, transition-timing-function, transition-delay.

.selector { 
  transition-property: property; 
  transition-duration: duration; 
  transition-timing-function: timing-function; 
  transition-delay: delay 
      
  /* The transition property is the shorthand for the above four properties */ 
  transition: property duration timing-function delay; 
}

transition-property se referă la proprietatea CSS pe care doriți să o treceți. Este necesar în transition stenografie.

transition-duration se referă la durata tranziției. Cât timp doriți să dureze tranziția? Această valoare este scrisă în secunde cu s sufix (ca 3s). De asemenea, este necesar în transition stenografie.

transition-timing-function se referă la modul în care are loc tranziția. Veți afla mai multe despre acest lucru mai târziu.

transition-delay se referă la cât timp doriți să așteptați înainte de a începe durata. Această valoare este scrisă în secunde cu s sufix (ca 3s). transition-delay este opțional în transition stenografie.

Declanșarea tranzițiilor

Puteți declanșa tranziții CSS direct cu pseudo clase precum :hover (se activează când mouse-ul trece peste un element), :focus (se activează atunci când un utilizator accesează un element sau când un utilizator face clic pe un element de intrare) sau :active (se activează atunci când utilizatorul face clic pe element).

/* creating transitions directly in CSS */ 
.button { 
  background-color: #33ae74; 
  transition: background-color 0.5s ease-out; 
} 

.button:hover { 
  background-color: #1ce; 
}

Vezi stiloul Tranziție CSS de Zell Liew (@zellwk) pe CodePen.

De asemenea, puteți declanșa tranziții CSS prin JavaScript adăugând sau eliminând o clasă.

/* CSS */
.button { 
  background-color: #33ae74; 
  transition: background-color 0.5s ease-out; 
} 

.button.is-active { color: #1ce; }

// JavaScript
const button = document.querySelector('.button') button.addEventListener('click', _ => button.classList.toggle('is-active'))

Vezi stiloul Tranziție CSS cu JavaScript de Zell Liew (@zellwk) pe CodePen.

Înțelegerea funcției de temporizare-tranziție

transition-timing-function guvernează modul în care are loc o tranziție. Toate tranzițiile au o valoare de linear implicit, ceea ce înseamnă că proprietatea se modifică uniform până la sfârșitul tranziției.

.selector { 
  transition: transform 1s linear; 
  
  /* OR */ 
  transition-property: transform; 
  transition-duration: 1s; 
  transition-timing-function: linear; 
}

Lucrul este că puține lucruri se mișcă liniar în viață. Nu așa se mișcă obiectele reale. Uneori, accelerăm; uneori, decelerăm. transition-timing-function vă permite să surprindeți toate acestea.

Imaginați-vă că aruncați o minge de tenis într-un câmp deschis. Mingea îți lasă mâna cu viteza maximă. Pe măsură ce se mișcă, pierde energie, decelerează și, în cele din urmă, se oprește. Aceasta se numește ease-out. Există o funcție de sincronizare pentru aceasta.

.selector { 
  transition-timing-function: ease-out; 
}

Acum imaginați-vă că sunteți într-o mașină. Nu se mișcă acum. Când mutați mașina, aceasta accelerează și merge spre viteza maximă. Aceasta se numește ease-in. Există, de asemenea, o funcție de sincronizare pentru aceasta.

.selector { 
  transition-timing-function: ease-in; 
}

De vreme ce ai ease-in și ease-out, există, de asemenea, o funcție de sincronizare care combină cele două împreună, ease-in-out. (Nu vă recomand să utilizați ease-in-out în tranzițiile dvs., cu excepția cazului în care tranzițiile dvs. durează mai mult de o secundă. Nimic nu se ușurează în și într-o secundă. Pur și simplu pare ciudat.)

.selector { 
  transition-timing-function: ease-in-out; 
}

Vedeți acest stilou pentru o demonstrație a funcțiilor de sincronizare pe care le-ați învățat până acum:

Vezi stiloul Funcții de sincronizare a tranziției CSS (fără cub) de Zell Liew (@zellwk) pe CodePen.

În cele din urmă, dacă nu vă place niciuna dintre opțiunile de mai sus, vă puteți crea propria funcție de sincronizare cu cubic-bezier.

Crearea propriei funcții de sincronizare cu cubic-bezier

Un Cubic-bezier este un set de patru valori care determină funcția dvs. de temporizare-tranziție. Arată așa:

.selector { 
  transition-timing-function: cubic-bezier(x1, y1, x2, y2); 
}

Nu vă faceți griji cu privire la x1, y1,, x2 și y2. Nu veți crea niciodată curbe cub-bezier scriind dvs. numere (cu excepția cazului în care știți deja ce înseamnă și vă ajustați funcția de sincronizare pentru perfecțiune).

Vă puteți baza atât pe instrumentele de dezvoltator de încredere, cât și pe Chrome, pentru a vă ajuta să vă creați curbele. Pentru ao utiliza, adăugați un transition-timing-function într-un element, apoi deschideți devtools și faceți clic pe funcția de sincronizare.

Vezi stiloul Funcții de sincronizare a tranziției CSS de Zell Liew (@zellwk) pe CodePen.

Continuarea aprofundării despre crearea propriilor curbe bezier pentru animațiile dvs. nu intră în sfera de aplicare a articolului de astăzi. Dacă sunteți interesat, puteți găsi mai multe informații despre curbele cub-bezier în „Înțelegerea funcțiilor de sincronizare CSS” de Stephen Greig.

Tranziția a două sau mai multe proprietăți

Puteți trece două (sau mai multe) proprietăți CSS separându-le cu o virgulă în transition sau transition-property proprietate.

Puteți face același lucru și cu durata, funcțiile de sincronizare și întârzierile. Dacă valorile sunt aceleași, trebuie doar să specificați una dintre ele.

.selector { 
  transition: background-color 1s ease-out, color 1s ease-out; 
  
  /* OR */  
  transition-property: background, color; 
  transition-duration: 1s; 
  transition-timing-function: ease-out; 
}

Este posibil să fiți tentat să faceți tranziția cu fiecare proprietate CSS cu all. Nu face asta niciodată. Acest lucru este rău pentru performanță. Specificați întotdeauna proprietatea pe care încercați să o tranziționați.

/* DON'T EVER DO THIS */ 
.selector { 
  transition-property: all;
} 

/* ALWAYS DO THIS */ 
.selector { 
  transition-property: background-color, color, transform; 
}

Tranziția în față față de tranziția în afară

Uneori, doriți ca proprietățile să treacă în mod diferit. Doriți ca durata, funcția de sincronizare sau întârzierea să fie diferite.

Pentru a face acest lucru, scrieți un alt set de transition- proprietăți.

.button { 
  background-color: #33ae74; 
  transition: background-color 0.5s ease-out; 
} 

.button:hover { 
  background-color: #1ce; 
  transition-duration: 2s; 
}

Când scrieți proprietăți de tranziție în clasa de declanșare (pseudo), proprietățile de tranziție din clasa de declanșare suprascriu proprietățile de tranziție originale pe care le-ați menționat în clasa de bază.

Deci, în exemplul de mai sus, când plasați cursorul pe buton, culoarea de fundal durează 2 secunde pentru a trece de la #33ae74 la #1ce.

Când plasați cursorul de pe buton, culoarea de fundal durează doar 0,5 secunde pentru a reveni la #1ce pentru că transition-duration de 2s nu mai există.

Vezi stiloul CSS Transition (diferite viteze de tranziție la trecerea în și în afara) de Zell Liew (@zellwk) pe CodePen.

Înfășurându-se

Tranzițiile CSS sunt cel mai simplu mod de a efectua animații. Puteți crea tranziții fie cu transition stenografie sau cu transition- proprietăți.

Pentru a crea o tranziție, suprascrieți o proprietate dintr-o clasă (sau o clasă psuedo) și specificați proprietatea în care să tranzitați transition sau transition-property.

Nu uitați să vă schimbați transition-timing-function deci animația dvs. pare mai reală!

Dacă ți-a plăcut acest articol, îți va plăcea să înveți Aflați JavaScript – un curs care te ajută să înveți construiește componente reale de la zero cu JavaScript.

(O, apropo, dacă ți-a plăcut acest articol, aș aprecia dacă ai putea împărtășește-l. )

Publicat inițial la zellwk.com.