Transition CSS qui ne fonctionne pas

Bonjour,
Je suis présentement à l'essaie de faire une transition d'un bloc à un autre lors d'un clic mais pour une raison que je m'explique mal la transition css ne produit pas l'effet escompté. En gros, ce n'est pas fluide du tout. J'ai peut-être manqué un truc?

http://codepen.io/anon/pen/EZwRoW

Il te faut donner une hauteur valide.

max-height:100%; requiert une valeur définie pour height dans le parent (sauf pour html).

par exemple:

.contenu > article.active {
  max-height: 100vh;
}

est une valeur valide qui peut être diviser en x valeur pour effectuer la transition.

pour max-height:100%, ceci fonctionne :

.contenu   {
  height: 200px;
}
.contenu > article.active {
  max-height: 100%;/* = max-height:200px; */
}

++
Modifié par gcyrillus (26 Jan 2017 - 21:28)

Merci pour ta réponse.

effectivement, ça fonctionne maintenant. Sauf que je ne peux pas mettre une hauteur prédéfini ici, puisque la hauteur de chaque "article" varie à cause du contenu.
Modifié par juliesunset (27 Jan 2017 - 15:15)

Bonjour.

La propriété max-height ne définissant pas la hauteur mais la hauteur maximale, une possibilité est prendre une hauteur définie qui ne risque pas d'être dépassée...

Si on compte trop large, l'animation risque d'être un peu trop rapide mais ce n'est pas grave, n'est-ce pas ?

Il y a aussi la possibilité décrite dans le livre 'CSS3 Pratique du design web' de M. Goëtter : on n'utilise plus les transitions mais les animations et la propriété max-height n'étant prise en compte que le temps de l'animation, elle n'aura pas d'incidence sur le résultat final...

Maintenant, ça m'intéresse de savoir si d'autres ont une meilleure idée...



(On dit auteur au Canada ?.. )