如何消除使用最大高度过渡的 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

max-height

之间制作动画，但您的内容仅约为

120px

高。延迟是在你看不到的 880 像素上发生的动画。

将

max-height

设置为内容的已知

height

（如果您知道 - 例如：http://jsbin.com/onihik/1/）或尝试其他方法。也许像https://stackoverflow.com/a/6486082/2619379

Answer 3

我通过使用正常的打开过渡（从

max-height: 0px

到

max-height: 500px

）来修复它，但在关闭时使用动画，从

max-height: 50vh

开始。

这样，延迟就不会从

5000px

缩小到内容的实际高度。 现在可能出现的唯一延迟是，如果您的内容小于屏幕高度的

50%

，但在我的情况下，效果非常顺利。

这是我的魔法（scss 格式）：

.slide-open{
  max-height: 0;
  overflow: hidden;
  &:not(.open){
    animation-name: shrink;
    animation-duration: .3s;
  }
  &.open{
    max-height: 5000px;
    transition: max-height .9s ease-in-out;
  }
}

@keyframes shrink {
  0% { max-height: 50vh; }
  100% { max-height: 0; }
}