Masquer les barres de défilement lors d'une animation

CSS ne peut toujours pas être animé à la taille automatique.

 .dérouler {
  transition: 0,2 s;
  hauteur: 0;
}
.dropdown.open {
  / * La hauteur changera, mais ne sera pas animée. * /
  Hauteur: Auto;
}

Vous pouvez essayer des astuces JavaScript. Brandon Smith il n'y a pas longtemps a décrit plusieurs techniques ici. J'ai pensé à cette solution parce que c'est très simple:

 .dérouler {
  transition: 0,2 s;
  max-height: 0;
}
.dropdown.open {
  / *? * /
  max-height: 400px;
}

Maintenant que nous avons ce nombre magique de 400px, ce n'est vraiment pas idéal. Cependant, le fait que cette méthode fonctionne et est si simple le rend extrêmement attrayant que je l'ai toujours utilisé dans des environnements de production.

Mais les nombres magiques ne sont pas le seul problème. Un autre problème est la barre de défilement.

Lorsque nous définissons max-height: 0; nous avons également besoin d' overflow: hidden; Pour vous assurer que le menu déroulant est en fait caché lorsqu'il est fermé. Lorsque le menu déroulant s'ouvre, nous devrions probablement utiliser overflow: auto; Pour que nous ne puissions pas couper accidentellement le contenu si la hauteur naturelle du menu déroulant dépasse la max-height élargie. Utilisation overflow: auto; résout ce problème, mais introduit un autre problème: pendant l'expansion, notre menu déroulant affichera toujours des barres de défilement pendant au moins une partie du temps d'extension, même si elles ne sont pas requises pour la hauteur d'expansion finale. C'est gênant!

Les conseils CSS viennent à secourir.

Nous pouvons toujours utiliser overflow: auto; Dans l'état élargi - nous avons juste besoin de l'écraser pendant l'animation. Comme nous l'avons appris dans la grande bataille de spécificité CSS, @keyframes a la capacité incroyable de couvrir quoi que ce soit pendant qu'ils sont actifs. Utilisons-les non pas pour les animations, mais pour cette fonction de barre de défilement cachée:

 .dérouler {
  max-height: 0;
  débordement: caché;
  Transition: MAX-HEIGHT 1.2S Factual-Out;
}
.dropdown.open {
  débordement: auto;
  max-height: 400px;
  Animation: Hide-Scroll 1.2s à l'envers;
}
@KeyFrames Hide-Scroll {
  de, à {débordement: caché; }
}

C'est tout!

Essayez de régler la hauteur à une valeur plus petite et voyez comment vous ne voyez pas la barre de défilement pendant l'animation, mais seulement à la fin si nécessaire. Cela provoque une petite gigue lorsque la barre de défilement apparaît, mais dans mon cas, c'est acceptable car cela se produit rarement. Si vous souhaitez absolument arrêter la gigue, vous devrez peut-être toujours appliquer la barre de défilement (personnalisée) au menu déroulant et peut ajuster le style de la barre de défilement pendant l'animation au besoin.

Merci à M. Stephen Shaw de @keyframers pour cette astuce. Pendant que je travaillais sur quelque chose sur Codepen, je l'ai tiré pour m'aider à résoudre ce problème. Nous avons décidé de transformer cette astuce en une vidéo de canal Codepen, montrant le mode de collaboration, et nous l'avons utilisé pour trouver le problème / la solution:

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!