设置过渡持续时间时不需要的 CSS 延迟答案

【问题标题】：Unwanted CSS delay when setting transition duration设置过渡持续时间时不需要的 CSS 延迟
【发布时间】：2016-09-20 07:03:34
【问题描述】：

我希望菜单在打开时的持续时间内关闭。出于某种原因，在关闭之前有一个延迟，以及显示一些额外的空间，我不知道它来自哪里。

这里是 jsfiddle：https://jsfiddle.net/m9pd8bjh/7/

这是 CSS 代码，以防您立即发现错误：

.hide {
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
}

input[type=checkbox]:checked~.toggleable {
  visibility: visible;
  overflow: visible;
  max-height: 1000px;
}

.toggleable {
  transition: visibility 5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out;
}

我正在使用复选框-标签组合来触发菜单的打开和关闭。

【问题讨论】：

"max-height 2.5s ease-in-out" - 在此处删除 2.5 之后的 's'
@Sampada 对我没有任何帮助。使整行无效。这样做的目的是什么？
这会减少您在第一次单击 Menu 时所拥有的额外空间。此外，溢出不是 CSS 动画属性。参考这个 - oli.jp/2010/css-animatable-properties

标签： html css css-transitions transition transitions

【解决方案1】：

首先需要了解的是CSS中的visibility属性是不能动画的。这是因为它只有两种状态（可见或隐藏，中间没有任何东西来促进动画）。

如果您想制作淡入效果，可以使用 opacity:0; 到 opacity:1; 并给它一个过渡。

接下来要注意的是，你的动画时间很长，如果你动画的是max-width，你需要缩短动画时间来调整。

见小提琴：https://jsfiddle.net/m9pd8bjh/12/

还有 CSS：

.toggleable {
  transition: max-height 0.25s ease-in-out;
}

如果您特别想要较长的动画时间范围，那么您将不得不使用最大高度解决方案以外的其他解决方案。

这将成为一种新的途径，因为您必须使用 JavaScript、jQuery 或其他类似的框架。

为了将来参考，这里有一个使用 jQuery 做同样事情的小提琴：https://jsfiddle.net/m9pd8bjh/15/

这里是 jQuery 代码：

$('.toggler').click(function(){
    $('.hide').slideToggle();
});

【讨论】：

我使用 5s 进行测试（我设置了一个小数字，这样用户就可以享受无缝动画而无需等待），所以我可以看到它慢慢发生。谢谢你的解释。那么，我认为没有数值的 CSS 属性不能转换？
任何时候 :) 是的，这是一个很好的经验法则。 CSS 过渡只对可以用数字测量的东西有用。 IE。可以转换十六进制代码颜色（例如从 #000000 到 #8fbce3），因为它仍然可以在十六进制数字系统中进行测量。
其实我在你做jsfiddle的时候就明白为什么解决了。最大高度为 1000，从 1000 到 0 的速度非常慢，而在打开时一切都会很快显示，因为元素显示在 ~50px。当您将其设置为 100 像素时，它打开的速度要快得多。谢谢！

【解决方案2】：

当您关闭菜单时，我添加了另一个过渡，并删除了 ul 元素的初始边距。你觉得这个效果好吗？

CSS 代码已更改

.hide {
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
  transition: visibility 0.5s ease-in-out, overflow 0.5s ease-in-out, max-height 0.5s ease-in-out;
}
#menu-main { margin: 0;   padding: 10px 40px }

input[type=checkbox]:checked ~ .toggleable {
  visibility: visible;
  overflow: visible;
  max-height: 1000px;
  transition: visibility 2.5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out;
}

See this fiddle

【讨论】：

关闭时还有一点延迟。