Transition de la hauteur de 0 à Auto à l'aide de CSS

Créer des transitions de hauteur fluides avec CSS

La transition de la hauteur d'un élément de 0 à auto à l'aide de CSS peut être difficile en raison de l'absence de point final défini pour la valeur auto. Cela provoque souvent l'apparition brusque d'éléments sans effet de transition en douceur.

Dans cet article, nous explorerons comment obtenir un effet de glissement fluide pour un élément utilisant des transitions CSS. Nous examinerons les problèmes courants et proposerons des solutions pour créer une transition transparente sans recourir à JavaScript.

Comprendre les transitions de hauteur fluides en CSS

Le premier script démontre une approche CSS uniquement pour faire passer la hauteur d'un élément de 0 à une hauteur spécifiée. En utilisant le overflow: hidden; propriété, tout contenu qui s'étend au-delà de la hauteur de l'élément est masqué, garantissant une transition nette. Le transition: height 1s ease; La propriété applique un effet de transition en douceur à la hauteur sur 1 seconde. Lorsque l'élément parent est survolé, la hauteur de l'élément enfant prend une valeur prédéterminée, créant l'illusion de glisser vers le bas. Cette méthode nécessite cependant de connaître à l’avance la hauteur finale de l’élément.

Le deuxième script intègre JavaScript pour ajuster dynamiquement la hauteur d'un élément. Lorsque l'élément parent est survolé, le script calcule la hauteur totale du contenu à l'aide de scrollHeight et définit cette valeur sur style.height propriété de l’élément enfant. Cela garantit une transition en douceur de la hauteur 0 à la hauteur du contenu complet sans connaître à l'avance la hauteur finale. Le addEventListener('mouseenter') et addEventListener('mouseleave') les fonctions sont utilisées pour gérer les événements de survol de la souris, garantissant que la hauteur revient à 0 lorsque la souris quitte l'élément parent.

Techniques avancées pour les transitions de hauteur CSS

Le troisième script exploite les variables CSS pour gérer les transitions de hauteur. En définissant une variable globale :root pour la hauteur maximale, nous pouvons attribuer dynamiquement cette valeur à l'élément enfant pendant l'état de survol. La variable var(--max-height) est utilisé dans le CSS pour définir la hauteur, garantissant que la transition est fluide et adaptable aux changements de contenu. Cette approche combine la simplicité du CSS avec la flexibilité des valeurs dynamiques, facilitant ainsi la gestion et la mise à jour des hauteurs de transition selon les besoins.

Chacune de ces méthodes offre une solution différente au problème de la transition de la hauteur d'un élément de 0 à auto. L'approche CSS pure est simple mais limitée par la nécessité d'une hauteur prédéfinie. La méthode JavaScript offre plus de flexibilité, permettant des calculs de hauteur dynamiques, mais nécessite des scripts supplémentaires. La technique des variables CSS offre un juste milieu, combinant facilité d'utilisation et capacités dynamiques. En comprenant et en utilisant ces techniques, les développeurs peuvent créer des transitions de hauteur fluides et visuellement attrayantes dans leurs projets Web.

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: 100px; /* Set this to the max height you expect */
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>
<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  parent.addEventListener('mouseenter', () => {
    child.style.height = child.scrollHeight + 'px';
  });
  parent.addEventListener('mouseleave', () => {
    child.style.height = '0';
  });
</script>

<style>
  :root {
    --max-height: 100px;
  }
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: var(--max-height);
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

Explorer les animations CSS pour des transitions fluides

En plus de la hauteur de transition, les animations CSS offrent un moyen polyvalent de créer des effets visuels fluides. Les animations CSS vous permettent d'animer un large éventail de propriétés au-delà de la hauteur, notamment l'opacité, la transformation et la couleur. En définissant des images clés, vous pouvez contrôler les étapes intermédiaires d'une animation, ce qui donne lieu à des transitions plus complexes et visuellement attrayantes. Par exemple, vous pouvez combiner une transition de hauteur avec un effet de fondu pour créer une expérience utilisateur plus dynamique et plus engageante. La règle des images clés en CSS vous permet de spécifier les états de début et de fin d'une animation, ainsi que n'importe quel nombre d'états intermédiaires, vous donnant ainsi un contrôle précis sur le processus d'animation.

Un autre aspect des animations CSS est la possibilité de séquencer plusieurs animations à l'aide de la propriété animation-delay. Cette propriété vous permet d'échelonner les heures de début des différentes animations, créant ainsi un effet superposé. Par exemple, vous pouvez d'abord effectuer une transition de hauteur d'un élément, suivie d'un changement de couleur, puis d'une rotation de transformation. En orchestrant soigneusement ces animations, vous pouvez créer des interfaces utilisateur sophistiquées et soignées. De plus, les animations CSS peuvent être combinées avec des transitions CSS pour gérer les changements d'état discrets et continus, offrant ainsi une boîte à outils complète pour créer des expériences Web interactives.