css-transitions - 如何消除使用最大高度过渡的 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 到 1000 像素的最大高度之间设置动画，但您的内容只有大约 120 像素高。延迟是在您看不到的 880 像素上发生的动画。

将 max-height 设置为内容的已知高度（如果您知道 - 例如：http: //jsbin.com/onihik/1/）或尝试不同的方法。也许像https://stackoverflow.com/a/6486082/2619379

Answer 3

在我的情况下，我通过使用正常过渡来修复它（从最大高度 0 像素到最大高度 500 像素），但是在关闭时使用动画，从最大高度 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; }
}