基于子元素高度的动态高度动画

Question

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

我无论如何都不能使高度动画化！

CodePen（和以下代码）演示了页面之间工作的滑动动画，但容器的高度只是瞬间改变。

http://codepen.io/anon/pen/jqbExY

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();
});

- gberger

---

给 .first 和 .second 设置一个固定的高度，像这样：**.first{height:250px;.......}** - Arif Burhan

我不能这样做，因为它们的高度是根据它们的内容而定的。即使我这样做了，如果没有将这些高度归属到main中，它依然无法工作。http://codepen.io/anon/pen/XdmJOO - gberger

Answer 1

与其尝试动画容器的高度，不如动画其中元素的高度。作为一个基本的例子，你可以这样做：

CSS：Codepen Update

.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');

- Derek Story

Answer 2

过渡效果与 height: auto 不兼容，但你可以尝试以下方法：

1- 你可以在 JavaScript 中测量每个新 div 的高度，并将 <main> 容器设置为该高度：动画将触发。

2- 你可以使用一个小技巧，将动画设置在 max-height 上，然后将 max-height 修改为比你的 div 更大的值。

- Suicideboy