javascript - 最大高度过渡不起作用并且工作缓慢

Question

我在设置 div 展开动画时遇到问题。我的 JQuery 函数执行了它应该执行的操作，但没有出现动画。我已经尝试了 transition : all 和 transition : max-height 但似乎都不起作用。当我想再次隐藏我的 div 时，也会发生一些非常奇怪的事情。似乎在它消失之前有某种延迟。这个延迟与动画的时间相匹配，但我不知道出了什么问题。请帮忙。

这是一个 fiddle :https://jsfiddle.net/vbqc2c27/1/

Answer 1

您不能从特定值 (0px) 到相对值 (100%) 设置动画。您需要使用特定值:

Updated fiddle

$("p").on("click",function() {
    if($("#test").css("max-height") == "0px") {
    $("#test").css("max-height","100px");
  }
    else {
    $("#test").css("max-height","0px");
  }
});

将“100%”更改为“100px”，效果很好。

当然，100 像素的段落高度不够(文本被剪裁)。因此，您可能需要添加一个函数来计算自动高度(以像素为单位)。