Introducere în Web Development

În această secțiune am să încerc să vă dezvălui ce greșeli am făcut înainte să înțeleg tranzițiile.

Tranziție pe selectorul nepotrivit

Tranziția trebuie pusă pe un selector care se aplică mereu pe element.

Un exemplu simplu e atunci când vrem să scalăm un buton la hover cu mouse-ul.

Instinctul de juniori ne face să vedem "hover" în enunțul problemei și să facem:

                    a:hover {
  transform: scale(1.1);
  transition: transform 250ms;
}
                

Dar psudo-clasa :hover e aplicată doar atunci când avem mouse-ul peste element. În rest, elementul nostru va avea transition: none și nu îi va fi aplicată nicio tranziție.

Corect ar fi să aplicăm tranziția pe selectorul care va fi mereu aplicat, și doar modificările să le punem pe cazurile speciale:

                    a {
  transition: transform 250ms;
}

a:hover {
  transform: scale(1.1);
}

                

Tranziție cu display: none

Proprietatea display nu poate fi animată, dar ce ne facem când vrem să ascundem un element prin animație.

În funcție de context, putem să facem tranziție pe dimensiuni (height sau width), pe proprietatea opacity, sau pe transform: scale(...).

Dacă vrem să ascundem cu adevărat, sau chiar să ștergem elementul, vom putea folosi JS pentru a detecta când s-a încheiat tranziția.

                    .parent a {
  display: none;
  transition: all 250ms;
}

.parent:hover a {
  display: block;
}
                

                    .parent a {
  transform: scale(0);
  transform-origin: top;
  transition: transform 250ms;
}
.parent:hover a {
  transform: scale(1);
}
                

Tranziție pe transformări

Poate doar creierul meu dă rateuri de genul ăsta, dar am încercat de mai multe ori să pun tranziție pe translate, rotate sau scale și constat că nu funcționează.

Tranzițiile funcționează exclusiv cu proprietăți CSS, nu pe funcții de transformare.
Tranzițiile funcționează excelent cu transformări dacă avem transition-property: transform;.

                    transform: rotate(180deg);
transition: rotate 1s;
                

                    transform: rotate(180deg);
transition: transform 1s;
                

                    rotate: 180deg;
transition: rotate 1s;
                

Adăugare de tranziție care le șterge pe celelalte

Atunci când pe un element avem mai multe tranziții, am putea avea nevoie la un moment dat să adăugăm o nouă tranziție pe lângă cele deja existente.

De fiecare dată când setăm o tranziție, celelalte vor fi șterse. Nu există altă soluție decât să scrii din nou tranzițiile, la care să o adaugi pe cea nouă.

                    a {
  transition: color 250ms;
}

a.target {
  transition: transform 0.5s;
}
/*
Rezultat:
La ancorele cu clasa target 
se va aplica doar tranziția 
cu transform
*/

                

                    a {
  transition: color 250ms;
}

a.target {
  transition: 
    color 250ms, 
    transform 0.5s;
}
/*
Rezultat:
La ancorele cu clasa target 
se vor aplica ambele tranziții
*/