Question

我无法让div扩展动画。我的JQuery函数做了它应该做的事情，但动画没有出现。我已经尝试了transition : all和transition : max-height，但似乎都没有效果。当我想再次隐藏我的div时，也会发生一些非常奇怪的事情。它似乎在它消失之前有一些og延迟。这个延迟与动画的时间相匹配，但我无法弄清楚出了什么问题。请帮忙。

这是一个小提琴：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");
  }
});

改变＆＃34; 100％＆＃34;到＆＃34; 100px＆＃34;它工作正常。

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

Answer 2

Updated fiddle - 无延迟的简单解决方案

修复延迟解决方案：

将cubic-bezier（0,1,0,1）转换函数放入元素。

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}

Answer 3

或者你可以使用slideToggle()函数，它比那简单得多:)

See this fiddle

<强> JS

$("p").on("click",function() {
    $("#test").slideToggle();
});

<强> CSS

div {
  display: none;
}

最大高度转换不起作用并且工作缓慢

3 个答案: