基于儿童身高的动画高度

Posted 2023-03-06

【中文标题】基于儿童身高的动画高度

【英文标题】：Animate height based on children's height

【发布时间】：2016-06-17 14:34:54

【问题描述】：

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

【问题讨论】：

给 .first 和 .second 一个恒定的高度，像这样：.firstheight:250px;.......

我不能，它们的高度取决于它们的内容。即使我这样做了，如果不将这些高度归因于main，它仍然无法工作。 codepen.io/anon/pen/XdmJOO

【参考方案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 更大的值。