Question

我有一个容器 - 想象它包含应用程序中的页面。我正在使用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();
});

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

Answer 2

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

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

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

根据儿童身高

2 个答案: