Maison > Article > interface Web > Comment définir la hauteur de transition de 0 à automatique en utilisant CSS ?

Comment définir la hauteur de transition de 0 à automatique en utilisant CSS ?

WBOYavant: 2023-09-18 12:29:021606parcourir

La transition de la hauteur de 0 à "auto" est un moyen d'animer en douceur la hauteur d'un élément à mesure qu'il change pour s'adapter à son contenu. Dans le développement Web, créer des transitions fluides et élégantes peut rendre un site Web plus attrayant et offrir une meilleure expérience utilisateur. Cependant, créer une transition de la hauteur 0 à « auto » peut être un peu délicat.

Grammaire

transition: [property] [duration] [timing-function] [delay];

Ici, property est la propriété CSS que nous voulons animer, duration est la durée pendant laquelle nous voulons que la transition se termine, timing-function spécifie la courbe de synchronisation ou la vitesse de la transition, qui détermine la façon dont l'animation accélère avec le temps ou la décélération, tandis que delay est un paramètre facultatif qui définit le temps d'attente avant de commencer la transition.

Hauteur de transition

En CSS, une transition est un moyen de créer une animation fluide et dynamique entre deux états d'un élément. Plus précisément, la hauteur de transition fait référence à l'effet d'animation qui se produit lorsque l'attribut de hauteur d'un élément change, améliorant ainsi l'expérience utilisateur et rendant le site Web plus attrayant.

Par exemple, si nous voulons créer une transition fluide lors du développement ou de la réduction d'un div ou si nous changeons la visibilité d'un menu déroulant. Nous pouvons le faire facilement en utilisant les propriétés de transition CSS et la propriété height,

Hauteur d'animation de 0 à "auto"

Lorsque nous voulons créer une transition de la hauteur 0 à "auto", ce n'est pas aussi simple que de simplement définir la propriété height sur "auto". En fait, la valeur « auto » n'est pas une valeur valide pour les transformations CSS. Nous pouvons le faire en suivant les étapes ci-dessous.

Étape 1 : Créer une structure HTML

Pour créer une transition, nous avons d’abord besoin d’un élément HTML auquel l’appliquer. Utilisons un div avec la classe "element".

Par exemple -

<div class="element">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
</div>

Étape 2 : Ajouter du CSS

Après avoir créé la structure HTML, nous devons ajouter du CSS pour créer des transitions. Nous définissons d'abord la hauteur initiale de la classe "element" à 0 et masquons le débordement.

Par exemple -

.element {
   height: 0;
   overflow: hidden;
}

Cela masquera le contenu de l'élément jusqu'à ce qu'il soit développé.

Étape 3 : Ajouter une transition

Maintenant, nous devons ajouter des attributs de transition à l'élément. Nous utilisons l'attribut height et définissons la fonction de durée et de synchronisation.

Par exemple -

.element {
   height: 0;
   overflow: hidden;
   transition: height 0.5s ease-in-out;
}

Dans cet exemple, la transition prendra 0,5 seconde et utilisera la fonction de synchronisation d'accélération, ce qui signifie que la transition démarrera rapidement et ralentira à la fin.

Étape 4 : Définir l'état étendu

Ici, afin de définir l'état développé de l'élément, nous utilisons une pseudo-classe et définissons la hauteur sur auto.

input[type="checkbox"]:checked~.element {
   height: auto;
}

Exemple 1

Voici un exemple d'utilisation de CSS pour définir la hauteur de transition de 0 à automatique.

<!DOCTYPE html>
<html>
 <head>
   <style>
      body { text-align: center; }
      .element {
         height: 0;
         overflow: hidden;
         transition: height 0.5s ease-in-out;
      }
      input[type="checkbox"]:checked~.element {
         height: auto;
      }
      p { margin: 0;}
   </style>
</head>
   <body>
      <h3>Transitioning height 0 to auto using CSS</h3>
      <input type="checkbox" id="toggle">
      <label for="toggle">Toggle Element</label>
      <div class="element">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         <p>Nulla faucibus nisi nec ullamcorper finibus.</p>
      </div>
   </body>
</html>

Exemple 2

Voici un autre exemple d'utilisation de CSS pour définir la hauteur de transition de 0 à automatique.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center;}
      .box {
         max-height: 0;
         width:200px;
         margin:auto;
         transition: max-height 1.4s ease-out;
         overflow: hidden;
         background: #b2ceed;
      }
      .tab:hover .box {
         max-height: 500px;
         transition: max-height 1s ease-in;
      }
   </style>
</head>
   <body>
      <h2>Transition height 0 to auto using CSS </h2>
      <div class="tab"><b>Hover on me to increase the height.</b>
         <div class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
      </div>
   </body>
</html>

Conclusion

Créer une transition de 0 à automatique à l'aide de CSS est un moyen simple et efficace d'ajouter un intérêt visuel à votre site Web. En suivant les étapes décrites dans cet article, nous pouvons facilement créer cet effet et améliorer l'expérience utilisateur sur notre site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html auto Property function 伪类

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Définir des propriétés abrégées pour toutes les propriétés animées à l'aide de CSSArticle suivant：Définir des propriétés abrégées pour toutes les propriétés animées à l'aide de CSS

Articles Liés

Voir plus