Css 过渡 - 意外延迟

Question

我想创建一个简单的切换按钮，它将展开/隐藏文本段落。我不想使用尽可能少的 javascript。

我试过这样：Fiddle

当我想隐藏展开的内容时会出现问题。 内容将在不必要的延迟后隐藏 - 当用户单击按钮时，动画不会立即开始。我已经在 chrome 和 firefox 中尝试过。在两者中我得到相同的行为。

谁能解释一下为什么我的代码会出现这种情况以及如何解决它？

这是与小提琴链接中的源代码相同的源代码：

HTML：

<div class="container">
  <h1 class="header">Header</h1>
  <p class="content">
    content
  </p>
  <a href="#" class="toggle">toggle</a>
</div>

CSS：

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
}

.expanded .content {
  max-height: 1000px;
}

Javascript：

var $container = $('.container');

$('.toggle').click(function() {
    $container.toggleClass('expanded');
});

Answer 1

改为添加min-height：

.content {
 max-height: 0;
 overflow: hidden;
 transition: min-height 1s ease-in-out;
 }

.expanded .content {
 min-height:20px;
 }

Answer 2

使用min-height 而不是max-height。

当您单击“切换”并展开 div 时，div 的高度分两步减小……首先是“自动”高度，然后是原始类中的最大高度。所以看起来的延迟实际上是两个步骤的高度降低。

max-height: 不是绝对值，除非内容本身强制高度更大，否则它是模棱两可的。脚本必须计算过渡时的实际高度，然后确定它是否大于正在过渡到的max-height 设置。

您可以通过向扩展类添加定义的高度来看到这一点：

var $container = $('.container');

$('.toggle').on('click', function() {
	$container.toggleClass('expanded');
});

.content {
  max-height: 0px;
  overflow: hidden;
  background: #ddd;
  transition:  max-height .2s ease-in-out;
}

.expanded .content {
  max-height: 300px;
  height: 150px;
  background: #ddd;
  transition:  max-height .2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p class="content">
    content
  </p>
  <a href="#" class="toggle">toggle</a>
</div>

如果您的内容实际上更大并且它导致 div 高于 max-height 值，则不会出现此问题。仅当原始高度小于过渡中的 max-height 值时才会出现问题。

var $container = $('.container');

$('.toggle').on('click', function() {
	$('.container').toggleClass('expanded');
});

.content {
  max-height: 0px;
  overflow: hidden;
  background: #ddd;
  transition:  max-height .2s ease-in-out;
}

.expanded .content {
  max-height: 1000px;
  background: #ddd;
  transition:  max-height .2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p class="content">
    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
  </p>
  <a href="#" class="toggle">toggle</a>
</div>

如果您调整并使用min-height，您将获得平滑过渡。您还需要在主类中添加height: 0; 以在折叠时完全隐藏 div。

var $container = $('.container');

$('.toggle').on('click', function() {
	$container.toggleClass('expanded');
});

.content {
  min-height: 0px;
  height: 0;
  overflow: hidden;
  background: #ddd;
  transition:  min-height .2s ease-in-out;
}

.expanded .content {
  min-height: 150px;
  background: #ddd;
  transition:  min-height .2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p class="content">
    content
  </p>
  <a href="#" class="toggle">toggle</a>
</div>