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值，则不会出现此问题。当原始高度小于转换中的最大高度值时，这只是一个问题。

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>