J'aimerais une méthode qui utilise uniquement les transitions CSS, effectivement (et joliment) masquer/afficher le contenu sur le vol stationnaire.
L'inconvénient étant que je veux garder de la dynamique (automatique) de hauteur.
Il semble que l'itinéraire optimal serait de faire la transition entre un fixed height:0, pour un height:auto, mais hélas, ce n'est pas encore pris en charge par des transitions dans les navigateurs.
Des précisions en réponse aux commentaires :: Ce n'est pas tellement une question d'attente jusqu'à ce que vivent tous les navigateurs sont CSS3 compatible, mais plutôt d'aborder une défaillance perçue de CSS3 lui-même (par exemple. le manque d' height:0 > height:auto)
J'ai exploré un peu de d'autres façons, qui peut être consulté à la suite de violon et détaillées ci-dessous), mais aucun ne me satisfait, et j'aimerais des commentaires/conseils pour d'autres approches.
http://jsfiddle.net/leifparker/PWbXp/1/
La Base de CSS
.content{
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
overflow:hidden;
}
Variation #1 - Max-Hauteur Hack
.content { max-height:0px; }
.activator:hover +.content{ max-height:2000px; }
Cons
un. Vous aurez besoin de fixer arbitrairement un upper max-hauteur, qui, avec une vaste dynamique de contenu, pourrait couper de l'information.
b. Si, à titre de précaution pour (un), vous avez recours à la fixation d'un très haut haut max-hauteur, le retard à l'animation devient difficile et intenable, comme le navigateur de manière invisible les transitions de l'ensemble de la distance. Fait également l'assouplissement du moins visuellement efficace.
Variation #2 - le Rembourrage et l'Illusion de la Croissance
.content { padding:0px; height:0px; opacity:0; }
.activator:hover +.content { padding:10px 0px; height:auto; opacity:1; }
Cons
un. C'est choquante. C'est certainement un peu mieux que de sauter juste le contenu de nulle part, et l'effet est encore vendu par la transition de l'opacité, mais dans l'ensemble c'est pas que visuellement attractif.
Variation #3 - Le Mauvais Largeur De La Seule Approche
.content { width:0%; }
.activator:hover +.content{ width:100%; }
Cons
un. Comme la largeur se rétrécit, la ligne des forces de tout texte supplémentaire sur les lignes suivantes, et nous nous retrouvons avec un super grand invisible div qui exige toujours de l'immobilier.
Variation n ° 4 - L'efficacité, mais de Nervosité, Taille de Police
.content { font-size:0em; opacity:0; }
.activator:hover +.content{ font-size:1em; opacity:1; }
Cons
un. Tout cela a un joli balayage sorte d'effet, le déplacement de la ligne que la police pousse causes désagréable de la gigue.
b. Cela ne fonctionne que pour le contenu du texte. D'autres transitions doivent être ajoutés pour gérer la mise à l'échelle des entrées et des images, et bien que tout à fait viable, cela saperait la simplicité.
Variation #5 - Le Butteriness de la Hauteur de la Ligne
.content { line-height:0em; opacity:0; }
.activator:hover +.content{ line-height:1.2em; opacity:1; }
Cons
un. Mon préféré esthétiquement, mais comme avec n ° 4, il s'agit plus simplement de contenu texte uniquement.
Variation n ° 6 - la lutte contre La Marge (comme proposé par @graphicdivine)
.wrapper_6 { min-height: 20px }
.wrapper_6 .activator {z-index:10; position: relative}
.wrapper_6 .content { margin-top: -100%; }
.wrapper_6 .activator:hover +.content{ margin-top: 0 }
Cons
un. Il y a un retard sur le vol stationnaire qui n'est pas optimal. C'est le résultat de l' .content étant caché, invisible, assez loin de l'écran, et en prenant le temps d'animer à la baisse, avant de paraître.
b. L' margin-top: -100% est par rapport à l'élément contenant la largeur. Donc, avec des fluides modèles il est possible que lorsque la fenêtre est réduite assez petite, la margin-top ne sera pas suffisante pour maintenir le .content cachés.
Comme je l'ai dit avant, si seulement nous pouvions transition entre height:0 et height:auto, ce serait tout à fait discutable.
Jusqu'alors, toutes les suggestions?
Merci! Leif
