Seeking an elegant, CSS-only method for hiding/showing auto-height content (with transitions)

Question

I\'d like a method that uses only CSS transitions, to effectively (and attractively) hide/show content on hover.

The caveat being that I wish to keep dynamic (auto)

Answer 1

You should use scaleY.

HTML:

<p>Here (scaleY(1))</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CSS:

ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}

I've made a vendor prefixed version of the above code on jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/

Answer 2

Try this, The anti-margin:

.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 }

http://jsfiddle.net/PWbXp/

Answer 3

Well... I know it's been awhile, but I needed to use a height animation, and believe that a lot of other programmers still need or/and will need to do it.

So, I fell here because I needed to show mode details of a product description inside a cell-table when user hovers the cell. Without user hovering, only the maximum of 2 lines of description are shown. Once user hovers it, all lines (text can be since 1 to 8 lines, dynamic and unpredictable length) must be show with some kind of height animation.

I come to the same dilemma, and choose to use the max-height transition (setting a high max-height, which I was sure that will not cut my text), because this approach appears to me to be the cleanest solution to animate the height.

But I couldn't be satisfied with the delay on the "slide up" animation, just like You.
That's when I found a commentary about transition curve here: http://css3.bradshawenterprises.com/animating_height/ .

The Idea of this guy is brilliant, but just this solution alone "cut-off" the effect of "slide down" animation. So thinking a little I just come to a final solution.

So here is my solution using the Rhys's Idea (Guy of link above):

Slide Down Animation (Hover), with a "smooth grow", and Slide Up Animation without (virtually) "delay":

div {
  background-color: #ffffd;
  width: 400px;
  overflow: hidden;
  -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  max-height: 38px;
}
div:hover {
  -webkit-transition: max-height 2s ease;
  -moz-transition: max-height 2s ease;
  transition: max-height 2s ease;
  max-height: 400px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis
  placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.
</div>

Here is a Simple JsFiddle

And Here is your JsFiddle updated (slice of it, indeed)

This is a perfect (in my opinion) solution for menu, descriptions and everything that isn't extremely unpredictable, but as You pointed before, there is the need to set up a high max-height, and may cut-off a surprisingly tall dynamic content. In this specific situation, I'll use jQuery/JavaScript to animate the height instead. Since the update of the content will be done using some sort of JavaScript already, I can't see any harm using a Js approach to animation.

Hope I helped somebody out there!