Jquery CSS立方贝塞尔变换会导致下面的内容跳转

我使用立方贝塞尔（0.68，-0.55,0.265,1.55）在手风琴列表中转换。问题是下面的内容也是“跳跃”

你有没有办法在我的手风琴（ul列表）下面留些空间

所以当它打开时不会移动下面的全部内容

无法更好地解释，因此我将附加预览

看那些“标签”跳来跳去。 Jsfiddle:Jsfiddle.net/dzvbtqLa/

试试这个：

-webkit-transform: translateZ(0);
-webkit-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-moz-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-o-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-ms-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-webkit-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67);
transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67);

---

先生，请试试这个：

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transform: translateZ(0);
-webkit-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-moz-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-o-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-ms-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67) 1s linear;
-webkit-transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67);
transition: height 0.35s cubic-bezier(0.17,0.67,0.83,0.67);
}
.panel-body
{
    text-align:justify; 

}

---

我知道这很旧，但我遇到了同样的问题，我找到了发生跳转的原因

基本上，这是为高度或最大高度设置动画的一个陷阱，因为默认高度/最大高度值大于容器中指定的所述高度的内容。所以现在发生的是：

动画开始

将动画设置为预定义的高度级别

内容区域小于预定义的高度级别，导致它“跳跃”，因为它首先动画到预定义的高度，然后动画到内容区域

动画周期的其余部分

---

除了使用jQuery之外，真的没有办法解决这个问题，这真的很令人不安，因为它在尝试控制动画类型时增加了很多工作和精力（例如，被迫使用slideUp（）+slideDown（）而不是立方贝塞尔动画提供的控制）。

您能提供一个代码的工作示例吗（可能是小提琴）和你的漂亮照片一起？这将导致更好的答案。这里你来做一些基本的事情，这只是把它放回线性过渡，我的想法是保持过渡。只是想在下面给它更多的空间，这样它就不会在后面移动内容。哦，好吧，但是你在bezier中的最后一个实例增加了div的大小，除非你给父对象一个最小的高度，使其保持在一个安全的区域内，否则唯一的解决办法就是将bezier的最后一个实例更改为小于1。