CSS cubic-bezier转换导致下面的内容跳转

Question

我使用cubic-bezier（0.68，-0.55,0.265,1.55）进行手风琴列表中的转换。问题是以下内容是“跳跃”。同样。

你有什么想法如何在手风琴下留下一些空间（ul列表）。

因此，当它打开时，不会移动下面的整个内容？

无法更好地解释，所以我会附上预览。

查看＆＃39;标签＆＃39;跳来跳去。 Jsfiddle：jsfiddle.net/dzvbtqLa /

Answer 1

试试这个：

-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);

Answer 2

请先生试试这个：

.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; 

}

DEMO

Answer 3

我知道这是旧的，但我刚遇到同样的问题，我想出了为什么跳跃正在发生。

基本上，这是高度或最大高度动画的缺陷，因为您的默认高度/最大高度值大于容器中被指定高度的内容。所以发生的事情是：

1. 动画开始
2. 动画到预定义的高度级别
3. 内容区域小于预定义的高度级别，导致其“跳转”，因为它首先动画到预定义的高度，然后到内容区域
4. 其余动画周期

除了使用jQuery之外别无他法，因为它为尝试控制动画类型增加了大量工作和努力（例如被迫使用slideUp（）+ slideDown（）与控件相比由立方贝塞尔动画提供。）