max-height à la rescousse des transitions CSS

Les transitions en CSS3, c’est vraiment pratique car il est possible de les appliquer sur un très grand nombre de propriétés.

Mais en entrant dans les détails, l’on se heurte assez rapidement à un problème de taille : il est généralement nécessaire de disposer de valeurs chiffrées ou des mots-clés pour que la transition s’opère. En bref, cela ne fonctionne pas avec la valeur ‘auto’.

Cette déficience est souvent bloquante, notamment lorsque l’on ne connaît pas les dimensions de l’élément initial ou final.

L’une des solutions, dénichée par Lea Verou, paraît prometteuse : utiliser la propriété max-height, comme en témoignent les quelques tests suivants :

A vous de jouer !