Question

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

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

您需要了解的第一件事是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();
});

Answer 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

设置转换持续时间时不需要的CSS延迟

2 个答案: