CODEWITHSUNDEEP
csscss-animations
James Craig
James Craig

Reputation: 6854

Dynamic Height Animation in CSS

After trying the following techniques, I am still stuck with how to animate an element's height in CSS.

The max-height Method JSFiddle

For my case, this is no good because all elements have varying heights. Furthermore you will notice a slight delay before the height starts to animate back up to 0px. This happens when the height of an element is much smaller (say 50px) than the 500px max-height set in the animation.

The transform Method JSFiddle

Again, this is no good for my case as you can see that it's not revealing more/less of the element like in the max-height method. This method is better for varying elements with varying height, but you can see it's rotating in from top to bottom. The scaleY method has the same problems.

So you can see that I need the animation to reveal the element from top to bottom. Also, the animation should have no delay revealing/hiding the element on mouse-over and mouse-out.

Upvotes: 4

Views: 2250

Answers (1)

vals
vals

Reputation: 64164

I have set a wrapper around your ul

And I have transformed both the wrapper and the ul in the Y axis, one upwards and the other in the opposite direction. Setting the amount of the transform to 100% makes it adjust exactly to the dimensions of the element.

So, it's kind of a sliding door that reveals the content progressively.

It' key for the succes of this technique that the 2 elements have the same height. I have transfered the margin by default of the ul to the wrapper

.wrap {
	margin: 10px;
	overflow: hidden;
	transform: translateY(-100%);
	transition: transform 1s linear;
	position: relative;
}

.wrap ul {
	margin: 0px;
	transform: translateY(100%);
	transition: inherit;
}

.trigger:hover  .wrap {
	transform: translateY(0%);
}
.trigger:hover  .wrap ul {
	transform: translateY(0%);
}

.trigger ~ .trigger {
  margin-left: 200px;
  }
<div class="trigger">	Hover
<div class="wrap">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div class="trigger">	Hover
<div class="wrap">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</div>
</div>

Note that the hover zones are a little bit tricky. But I haven't give much time to this issue as I understand this not key to what you want

Upvotes: 2

Related Questions