设置过渡持续时间时不需要的CSS延迟 [英] Unwanted CSS delay when setting transition duration

问题描述

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

I want the menu to close in the same duration it takes for it to open. For some reason, there is a delay before closing, along with showing some extra space I have no idea where it comes from.

这是jsfiddle： https：// jsfiddle。 net / m9pd8bjh / 7 /

Here is the jsfiddle: https://jsfiddle.net/m9pd8bjh/7/

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

Here's the CSS code in case you see something wrong immediately:

.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;
}

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

I'm using a checkbox-label combination to trigger the opening and closing of the menu.

推荐答案

您需要了解的第一件事是可见性属性无法设置动画。这是因为它只有两个状态（可见或隐藏，在这两个状态之间没有方便动画的状态）。

The first thing you need to understand is that the visibility property in CSS cannot be animated. This is due to it only having two states (either visible or hidden, nothing in between to facilitate the animation).

如果要产生淡入效果，可以使用 opacity：0; 来 opacity：1; 并进行过渡。

If you want to make a fade-in effect, you can use opacity:0; to opacity:1; and give that a transition instead.

接下来要注意的是动画时间很长，如果要为最大宽度设置动画，则需要缩短动画时间进行调整。

The next thing to note is that your animation time is very long, and if you are animating a max-width, you need to shorten the animation time to adjust.

请参阅小提琴： https://jsfiddle.net/ m9pd8bjh / 12 /

和CSS：

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

如果您特别想要较长的动画时间范围，则必须使用某些方法

If you specifically want that long animation timeframe, then you will have to use something other than a max-height solution.

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

This would then become a new avenue to approach as you would have to use JavaScript, jQuery or some other such framework.

供以后参考，这是一个使用jQuery的小提琴： https://jsfiddle.net/m9pd8bjh/15/

For future reference, here is a fiddle doing the same using jQuery: https://jsfiddle.net/m9pd8bjh/15/

这是jQuery代码：

And here is the jQuery code:

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

这篇关于设置过渡持续时间时不需要的CSS延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！