Hauteur de transition en CSS

1. Utilisez la propriété transition avec les propriétés max-height et overflow pour Transition Height en CSS
2. Utilisez la propriété transform avec transition en hauteur de transition en CSS

Cet article présentera quelques méthodes pour appliquer une transition à la hauteur d’un élément en CSS.

Utilisez la propriété transition avec les propriétés max-height et overflow pour Transition Height en CSS

Une transition est une propriété largement utilisée pour modifier une valeur de propriété en douceur sur une durée donnée. La transition peut également être nommée animation.

La transition possède certaines propriétés telles que transition-property, transition-duration, transition-timing-function et transition-delay. La propriété de transition définit la propriété CSS qui est modifiée par l’effet de transition.

Le paramètre transition-duration définit le temps que doit prendre la transition, c’est-à-dire le temps en secondes. La fonction transition-timing-function définit la manière dont la transition doit se produire, c’est-à-dire quel effet est donné à la transition.

La fonction transition-timing peut avoir les valeurs ease, ease-in, ease-out, linear, ease-in-out, etc. La propriété transition-delay spécifie le temps qu’il faut pour démarrer une transition.

Nous pouvons combiner ces propriétés et utiliser une propriété abrégée de transition comme suit.

transition: height 2s linear 1s;

Ici, height désigne transition-property, 2s définit transition-duration, linear spécifie transition-timing-function et 1s définit transition-delay.

Nous pouvons utiliser transition avec la propriété max-height pour définir la hauteur d’un élément de 0 à auto. Nous pouvons survoler le texte pour modifier la hauteur d’un élément HTML spécifique.

Nous pouvons utiliser la propriété overflow:hidden pour masquer les éléments débordants lorsque le max-height est défini sur 0.

Par exemple, créez un div et donnez-lui un identifiant de main. À l’intérieur de ce div, créez une balise de paragraphe p et écrivez Hover Me.

Ensuite, créez une liste non ordonnée avec la balise ul et donnez-lui un identifiant items. À l’aide de la balise li, créez des éléments de liste à l’intérieur de ul.

En CSS, sélectionnez l’identifiant items et définissez max-height sur 0. Il assure que les éléments à l’intérieur de ul ne sont pas affichés.

Ensuite, définissez la propriété background sur gray. Définissez la propriété overflow sur hidden.

Il masquera les éléments ul débordants lorsque max-height est à 0. Après cela, définissez la propriété transition sur max-height 0.15s easy-out.

Cela donnera aux éléments de la liste un effet d'assouplissement tout en survolant le curseur de la souris.

Utilisez le sélecteur :hover pour sélectionner l’id main puis sélectionnez l’id items. Ensuite, définissez la valeur de max-height sur 500px.

De ce fait, il ajustera automatiquement sa hauteur en fonction des éléments ul lorsque la taille de l’écran est inférieure à 500px. Ensuite, définissez la propriété de transition comme transition: max-height 0.25s ease-in;.

Cela réglera la hauteur du ul sur auto avec l’effet ease-in en 0.25 seconde.

L’exemple ci-dessous montre que la liste non ordonnée est affichée en survolant le texte avec un effet. Et la liste non ordonnée s’estompe en survolant le texte.

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 max-height: 0;
 transition: max-height 0.15s ease-out;
 overflow: hidden;
 background: gray;
}
#main:hover #items {
 max-height: 500px;
 transition: max-height 0.25s ease-in;
}

Utilisez la propriété transform avec transition en hauteur de transition en CSS

La propriété transform est utilisée pour la transformation 2D ou 3D d’un élément. Cette propriété peut avoir des valeurs telles que rotate, scale, skew, move, translate, etc.

Dans ce tutoriel, nous allons utiliser une scale pour changer la hauteur d’un élément. Et nous utiliserons également la propriété transition pour créer une animation pendant que le changement de hauteur se produit.

La propriété scale est utilisée pour redimensionner l’élément. Nous pouvons utiliser scale sur l’axe des X en utilisant scaleX et sur l’axe des Y en utilisant scaleY.

Ici, nous allons utiliser scaleY pour redimensionner la hauteur de l’élément, ce qui doit être fait verticalement (le long de l’axe Y). La valeur scaleY(1) indique que la hauteur d’un élément est de 100%, et la valeur scaleY(0) indique que la hauteur d’un élément est de 0%.

Il existe une propriété appelée transform-origin. Sa valeur nous indique d’où doit partir la transformation.

Comme nous voulons étendre la hauteur de haut en bas en augmentant la hauteur de 0 à auto, nous pouvons définir la valeur de transform-origin à top. Lorsque nous survolons un élément, nous pouvons définir la valeur de transform à scaleY(1) pour définir sa hauteur à auto.

Nous utiliserons le même modèle HTML utilisé dans la première méthode pour la démonstration.

Par exemple, sélectionnez l’identifiant items tel que #main #items et appliquez les styles. Réglez la background-color sur gray.

Ensuite, définissez la propriété transform sur scaleY(0). Ceci fixe la hauteur de l’élément à 0.

Définissez ensuite la propriété transform-origin sur top, car nous voulons que la transformation commence de haut en bas. Appliquez ensuite les styles transform 0.3s ease pour la propriété transition.

Ici, transform indique la propriété où nous voulons que l’animation se produise pendant le survol. Le 0.3s indique le temps que prendra l’animation pour se terminer.

Le ease indique la transition-timing-function, ce qui signifie que l’animation doit se produire. Enfin, définissez la propriété transform sur scaleY(1) à l’aide du sélecteur : hover.

Lorsque nous survolons le div, la hauteur du ul augmente à mesure que la valeur de transform passe de scaleY(0) à scaleY(1).

Exemple de code :

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 background-color: gray;
 transform: scaleY(0);
 transform-origin: top;
 transition: transform 0.3s ease;
}
#main:hover #items {
 transform: scaleY(1);
}