Question

我遇到了一个问题，我正在用来滑动面板的转换。

请查看以下jsbin http://jsbin.com/uvejuj/1/

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

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

什么导致关闭延迟，我该如何摆脱它？

由于

Answer 1

Fixed JS Bin

修复延迟解决方案：

将cubic-bezier（0,1,0,1）转换函数放入元素。

{{1}}

Answer 2

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

将max-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; }
}

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

3 个答案: