Définir des transitions en CSS

1. Utilisez les propriétés opacity et visibility avec la propriété transition pour définir la transition dans CSS
2. Utilisez les propriétés height, opacity et overflow avec la propriété transition pour définir la transition dans CSS

Cet article présentera les méthodes de définition de la transition dans CSS. Nous apprendrons à utiliser des transitions sur opacity, height et visibility pour donner des effets de fondu d’entrée et de sortie au survol et au survol.

Utilisez les propriétés opacity et visibility avec la propriété transition pour définir la transition dans CSS

On ne peut pas utiliser la propriété transition dans la propriété display en CSS. Par exemple, nous ne pouvons pas changer display : none en display : block après le survol (souris enfoncée) et vice versa en utilisant la propriété CSS transition. Par conséquent, nous pouvons utiliser les propriétés opacity et visibility avec la transition pour donner des effets de fondu d’entrée et de sortie aux éléments. La transition a certaines propriétés telles que transition-property, transition-duration, transition-timing-function et transition-delay. On peut aussi utiliser la propriété raccourcie de transition comme transition : opacity 2s linear 1s. Ici, opacity indique transition-property, 2s indique transition-duration, linear indique transtion-timing-function et 1s indique transition-delay. Nous pouvons utiliser le survol pour expérimenter la transition.

Par exemple, créez un div et utilisez les balises ul et li pour créer une liste de trois éléments de liste non ordonnés. Donnez au div une bordure de 1px solid black pour le voir. Définissez les propriétés de ul comme opacity: 0 et visibility: hidden et transition: visibility 0s, opacity 0.6s linear. Nous utilisons à la fois opacity et visibility car si nous utilisons uniquement opacity: 0, les éléments peuvent toujours être cliquables et survolables. Définissez la propriété de survol ul sur visibility: visible et opacity: 1 afin que les éléments de liste de ul s’affichent uniquement pendant le survol avec un effet de transition.

L’exemple ci-dessous montre que les éléments de ul ne sont visibles qu’au survol. Les éléments apparaissent avec un effet linéaire en 0,6 seconde et sont à nouveau masqués lorsque vous éloignez la souris.

Exemple de code :

<div>
 <ul>
 <li> Apple </li>
 <li> Banana </li>
 <li> Mango </li>
 </ul>
</div>

div {
 border : 1px solid black;
}
div > ul {
 visibility: hidden;
 opacity: 0;
 transition : visibility 0s, opacity 0.6s linear;
}
div:hover > ul {
 visibility : visible;
 opacity : 1;
}

Utilisez les propriétés height, opacity et overflow avec la propriété transition pour définir la transition dans CSS

Une autre alternative à l’utilisation de la transition sur display: none et display: block pourrait être les propriétés height, overflow et opacity utilisées avec la transition. Nous pouvons définir opacity : 0 et height : 0 pour la liste afin que les éléments ne soient pas vus. Nous devons également définir overflow : hide pour que les éléments ne sortent pas du div alors que transition-duration prend du temps. Nous pouvons utiliser la propriété abrégée transition telle qu’elle est dans la première méthode.

Par exemple, créez un div et créez une liste de trois éléments non ordonnés en utilisant les balises ul et li. Donnez au div une bordure de 1px solid black, même chose avec la première méthode. Définissez les propriétés de ul comme opacity: 0 , overflow: hidden et height: 0. Définissez la valeur de la propriété transition comme opacity 0.6s ease-in. Définissez la propriété de survol ul sur height: auto et opacity: 1 afin que les éléments de liste de ul ne s’affichent que pendant le survol avec l’effet de transition.

L’exemple ci-dessous montre que le div est vide et que la height de div est 0px. Mais lorsque nous survolons le div, la liste des éléments s’affiche avec un effet ease-in. L’option ease-in définit le démarrage lent de la transition. La propriété height de div devient auto. Lorsque nous survolons le div, il redevient vide.

Exemple de code :

<div>
 <ul>
 <li>Apple</li>
 <li>Banana</li>
 <li>Mango</li>
 </ul>
</div>

div {
 border: 1px solid black;
}
div > ul {
 opacity: 0;
 height: 0;
 overflow: hidden;
 transition: opacity 0.6s ease-in;
}
div:hover > ul {
 opacity: 1;
 height: auto;
}