基于儿童身高的动画高度答案

【问题标题】：Animate height based on children's height基于儿童身高的动画高度
【发布时间】：2016-06-17 14:34:54
【问题描述】：

我有一个容器——想象它包含应用程序中的页面。我正在使用 animate.css 从一个页面滑动到另一个页面。页面有不同的高度（根据其内容），因此容器必须调整大小以适应。

我一辈子都无法获得动画的高度！

CodePen（和以下代码）演示了页面之间的滑动动画，但容器的高度会立即改变。

HTML：

<button id=btn>animate</button>
<main>
  <section class="first">Little content</section>
  <section class="second">Lots of content ........</section>
</main>

CSS：

button {
  display: block;
  margin: auto;
}

main {
  border: 1px solid black;
  width: 400px;
  margin: auto;
  min-height: 100px;
  height: auto;
  transition: height 1s linear;
}

.first {
  background-color: red;
}

.second {
  background-color: green;
  display: none;
}

.leave {
  position: absolute;
}

JavaScript（jQuery 只是为了演示，实际上我使用的是 Angular）：

$('#btn').on('click', function() {
  var $first = $('.first');

  $first.addClass('slideOutLeft animated leave').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
    function(e) {
      $first.hide();
    });
  $('.second').addClass('slideInRight animated').show();
});

【问题讨论】：

给 .first 和 .second 一个恒定的高度，像这样：.first{height:250px;.......}
我不能，它们的高度取决于它们的内容。即使我这样做了，如果不将这些高度归因于main，它仍然无法工作。 codepen.io/anon/pen/XdmJOO

标签： css css-animations animate.css

【解决方案1】：

与其尝试对容器的高度进行动画处理，不如对其中元素的高度进行动画处理。作为一个基本示例，您可以执行以下操作：

Codepen Update

CSS

.second {
  background-color: green;
  max-height: 0px; // Use max-height so you can animate without setting a fixed height
  transition: 2s;
  overflow: hidden; // Instead of display: none;
}
.height {
  max-height: 200px; // Height is dynamic up to 200px
}

jQuery

$('.second').show().addClass('slideInRight animated height');

【讨论】：

【解决方案2】：

转换不适用于height: auto，但您可以找到方法：

1- 您可以尝试在 javascript 中测量每个新 div 的高度，并将您的 <main> 容器设置为此高度：动画将触发

2- 您可以稍作调整并在 max-height 上设置动画，然后将 max-height 修改为比您的 div 更大的值。

【讨论】：