La grille CSS peut effectuer des transitions de hauteur automatique

Conseils CSS! Nelson Menezes a découvert une nouvelle approche (ne fonctionne actuellement que dans Firefox), qui est très intelligente.

Vous savez peut-être que CSS ne peut pas animer à la taille automatique, ce qui est très malheureux. De l'animation zéro à la «taille de la demande» est très utile dans de nombreux cas. Nous avons documenté les technologies disponibles. Ils se résument à:

• Animer max-height à une valeur plus grande que vous avez besoin, ce qui rend le temps qui relâche le temps et non lisse.
• Utilisez JavaScript pour mesurer la taille finale et l'animer, ce qui signifie ... utilisez JavaScript.

La technologie de Nelson n'est ni celle ni une sorte d'approche basée sur la conversion qui a une maladresse visuelle. Ce noyau technologique utilise la grille CSS ...

 .expander {
  Affichage: grille;
  Grid-Template-Rows: 0fr;
  Transition: Grid-Template Rows 1s;
}

.expander.expanded {
  Grid-Template Rows: 1FR;
}

Incroyablement, dans Firefox, ces transitions entre le contenu dans cette zone de 0 à la hauteur naturelle du contenu. Faites juste un peu de travail supplémentaire comme cacher des débordements et une visibilité pour le faire paraître correctement tout en maintenant l'accessibilité:

C'est génial. Attendons une certaine attention sur cette question, et peut-être que Chrome l'adoptera également. Mais bien sûr, il serait préférable que la transition automatique en hauteur commence à fonctionner. Je ne peux pas imaginer que c'est complètement impossible.

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!