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

Question

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

这是 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;
}

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

Answer 1

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

CSS code changed

.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

Answer 2

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

如果您想制作淡入效果，可以使用 opacity:0; 到 opacity:1; 并为其提供过渡效果。

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

参见fiddle：https://jsfiddle.net/m9pd8bjh/12/

和CSS：

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

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

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

为了将来参考，这里是 fiddle 使用 jQuery 做同样的事情：https://jsfiddle.net/m9pd8bjh/15/

这里是 jQuery 代码：

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

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

Unwanted CSS delay when setting transition duration

html

css

transition

transitions

css-transitions