Css转换-意外延迟

Question

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

我试过这样做:小提琴

当我想隐藏展开的内容时出现问题。内容将在不必要的延迟后隐藏 -当用户单击按钮时，动画不会立即开始。我在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的高度在2步减少…首先是它的"auto"高度，然后是原始类中的max-height。所以看起来像延迟的实际上是高度降低了2步。

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>