While experimenting with CSS-transitions, I encountered an unusual issue when adding a transition for max-height from a specific value (e.g. 14px) to none.
Surprisingly, there is no animation at all; the hidden elements simply appear and disappear instantly.
I realized that because none has no set height, it becomes challenging to calculate the difference needed for the animation to take place. However, changing none to an actual value (e.g. 120px) resolves this and works as expected.
Is there a way to make this example work without altering the HTML structure?
$("div").click(function(){
$(this).toggleClass("unfold");
})div {
max-height: 14px;
overflow: hidden;
cursor: pointer;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
div.unfold {
max-height:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
First-line<br />
Second<br />
Third<br />
Fourth<br />
More<br />More<br />More<br />More<br />More<br />More<br />More<br />More<br />
</div>