当jQuery将height设置为auto时，css高度更改过渡动画未显示

Question

当我使用jQuery更改高度时：

jQuery("#a").css("height", "200px");

css过渡工作正常......但如果我使用：

jQuery("#a").css("height", "auto");

高度变化很好，但过渡并没有发生。这是什么原因？

的CSS：

#a {
transition: height .5s ease-in-out;
}

演示：

https://plnkr.co/edit/bNABZicUI7vplZGPNKuz?p=preview

Answer 1

正如我在评论中所说，这是一个很好的老经典......这就是诀窍，让它适应你的代码：

.element {
    border : blue dashed 5px;
    overflow : hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0,1,0,1);
}


.element:hover {
    max-height: 9999px;
    transition: max-height 0.5s cubic-bezier(1,0,1,0);
}

<div class="element">
  Blah <br>
 Blah <br>
 Blah <br>
 Blah <br>
 Blah <br>

</div>