如何删除Css3上的延迟滑出使用最大高度转换的转换

Question

我遇到了一个问题,我正在使用滑动面板进行滑动.

请看下面的jsbin http://jsbin.com/uvejuj/1/

请注意,当我第一次立即转换时单击切换按钮.

但是,如果我再次单击该按钮关闭,则转换会在执行之前延迟转换的时间.

什么导致关闭延迟,我怎么能摆脱它？

谢谢

Answer 1

固定JS Bin

修复延迟解决方案

将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 2

这是因为你的动画最大高度为0到1000px,但你的内容只有120px高.延迟是您无法看到的880像素上发生的动画.

将max-height设置为内容的已知高度(如果您知道 - 例如:http://jsbin.com/onihik/1/)或尝试其他方法.也许像/sf/answers/454025771/