28172 sujets

CSS et mise en forme, CSS3

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
Modérateur
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...

Smiley smile

(On dit auteur au Canada ?.. Smiley lol )
Mouais...
c'est que la différence de hauteur est assé grande entre les 2 blocs, on parle de presque le double.
Je suis preneuse pour une autre solution. Jouer sur l'opacité par exemple. Le but est de rendre le tout plus fluide.


Ce livre, "CSS3 Pratique du design web" c'est fait un bout de temps que je l'ai dans la mire... faudra bien que je le commande un jour!


(Désolé pour la fautes! erreur d'inattention de ma part! J'ai corrigé! Smiley biggol )
Sujet clos
Aller à