Catégories
Astuces et Design

Masquer les barres de défilement pendant une animation

CSS ne peut toujours pas animer auto dimensions.

.dropdown {
  transition: 0.2s;
  height: 0;
}
.dropdown.open {
  /* the height will change, but it won't animate. */
  height: auto;
}

Il existe une astuce JavaScript que vous pouvez essayer. Brandon Smith a décrit plusieurs techniques ici il y a quelque temps. Mon esprit va toujours à cette solution juste parce qu'elle est si simple:

.dropdown {
  transition: 0.2s;
  max-height: 0;
}
.dropdown.open {
  /* 🎉 */
  max-height: 400px;
}

Maintenant, nous avons ceci 400px nombre magique qui n'est vraiment pas idéal. Mais le fait que cela fonctionne et soit si simple rend extrêmement attrayant que je l'utilise tout le temps en production.

Mais le nombre magique n'est pas le seul problème. Un autre problème est les barres de défilement.

Quand on se met max-height: 0;, nous avons aussi besoin de overflow: hidden; pour vous assurer que la liste déroulante est réellement masquée lorsqu'elle est fermée. Lorsque la liste déroulante est ouverte, nous devrions probablement utiliser overflow: auto; afin que nous ne coupions pas accidentellement le contenu au cas où la hauteur naturelle de la liste déroulante est plus haute que la max-height après son expansion. L'utilisation de overflow: auto; résout ce problème en en introduisant un autre: pendant l'expansion, notre liste déroulante sera toujours avoir des barres de défilement pour au moins une partie de l'extension, même si la hauteur d'extension finale n'en a pas besoin. C'est étrange!

La ruse CSS à la rescousse.

On peut toujours utiliser overflow: auto; sur l'état développé – nous allons simplement le remplacer pendant l'animation. Comme nous l'avons appris dans la grande bataille de spécificité CSS, @keyframes ont une capacité incroyable à remplacer n'importe quoi pendant qu'ils sont actifs. Ne les utilisons pas pour animer l'ouverture, mais uniquement pour cette fonctionnalité de masquage de la barre de défilement:

.dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.2s ease-in-out;
}
.dropdown.open {
  overflow: auto;
  max-height: 400px;
  animation: hide-scroll 1.2s backwards;
  @keyframes hide-scroll {
    from, to { overflow: hidden; } 
  }
}

Ça fait l'affaire!

Essayez d'ajuster la hauteur à quelque chose de moins pour voir comment vous ne voyez pas les barres de défilement pendant l'animation, mais uniquement à la fin lorsqu'elles sont nécessaires. Cela provoque un peu de secousse lorsque la barre de défilement apparaît, mais c'était acceptable dans mon cas car il est rare que cela se produise. Si vous vouliez absolument arrêter la secousse, vous devriez probablement appliquer une barre de défilement (personnalisée) à tout moment à la liste déroulante et peut-être ajuster le style de la barre de défilement pendant l'animation, si nécessaire.


Nous remercions ici M. Stephen Shaw des @keyframers de fantaisie pour cette astuce. Je l'ai tiré pour m'aider à le comprendre pendant que je travaillais dessus pour quelque chose sur CodePen. Nous avons décidé de transformer l'astuce en vidéo pour le canal CodePen présentant le mode Collab, que nous avons utilisé pour comprendre le problème / la solution:

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *