最大高度转换不;不工作，工作缓慢

max-height transition doesn't work and works slow

本文关键字：工作 缓慢 转换 高度      更新时间：2023-09-26

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

这是一把小提琴：https://jsfiddle.net/vbqc2c27/1/

不能从特定值（0px）到相对值（100%）设置动画。您需要使用特定的值：

更新的小提琴

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

将"100%"更改为"100px"，效果良好。

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

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

修复延迟解决方案：

为元素设置三次贝塞尔（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;
}

或者您可以使用比slideToggle()函数更简单的函数：）

看看这个小提琴

JS

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

CSS

div {
  display: none;
}
相关文章：