Comment ajouter un CSS3 transition vers un élément enfant lorsque le parent est planait

<!doctype html>
<html>
 <head>
   <meta charset="utf-8">
   <title>CSS Transition</title>
   <style>
     .child{ display: none; }
     .parent:hover > .child{ display: block; }
   </style>
 </head>
 <body>
  <div class="parent">
   <div class="child">Content</div>
  </div>
 </body>
</html>

J'ai créé une mise en page simple ci-dessus montre que le concept de ce que je suis en train de réaliser. Ce que je veux faire maintenant est de faire du CSS3 transition qui va permettre à l'enfant de facilité lorsque le parent est planait. Cependant, je ne sais pas où placer la transition code de sorte qu'il fonctionne.

OriginalL'auteur Soma M. | 2013-07-05

  1. 12

    Pour l'enfant div qui est caché, l'utilisation height: 0; et overflow: hidden; au lieu de display: none;, Puis ajouter une hauteur spécifiée sur l'enfant indiqué lors de son survol. Cela permettra la transition.

    Je voudrais faire quelque chose comme ceci: http://jsfiddle.net/atjG8/1/

    .parent {
    background: red;
}
.child {
    overflow: hidden;
    height: 0;
    background: blue;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
    color: white;
}
.parent:hover > .child {
    height: 30px;
    display: block;
}

    Couleurs ont été ajoutées par exemple...

    OriginalL'auteur Derek Story