CSS立方贝塞尔过渡导致下面的内容跳跃

Question

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

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

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

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

看看这个 '标签' 跳来跳去。 的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，whic因为它增加了很多工作和努力来试图控制动画类型（例如，被迫使用slideUp（）+ slideDown（）与立方贝塞尔动画提供的控件）。