Dynamic animation height in CSS

Question

Having tried the following methods, I still stick to how to animate the height of an element in CSS.

max-heightJSFiddle Method

In my case, this is not good, because all the elements have different heights. In addition, you will notice a slight delay before the height starts to animate to 0px. This happens when the height of the element is much smaller (say, 50 pixels) than the 500px max-heightset in the animation.

transformJSFiddle Method

Again, this is not good for my case, as you can see that it does not show more / less an element similar to a method max-height. This method is better for different elements with different heights, but you can see how it rotates from top to bottom. The method scaleYhas the same problems.

So you can see that I need animation to show the element from top to bottom. In addition, the animation should not be delayed by opening / hiding the element when you hover over the mouse and mouse.

Answer 1

I installed a wrapper around your ul

And I converted both the wrapper and ul along the Y axis, one up and the other in the opposite direction. Setting the conversion value to 100% allows you to precisely adjust the size of the element.

So, this is a kind of sliding door that gradually reveals the content.

This is the key to the success of this technique that 2 elements have the same height. I put the default margin ul in 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>

Run codeHide result

, . , , , .