如何根据内容变化制作宽度/高度变化的动画？

Question

在下面的示例中，当您单击按钮时，某些内容将添加到 div 中。我想让 div 变得更大。这可以用纯 CSS 实现吗？

$('#btn').on('click', function() {
  $('#content').append("<p>Ab atque aut cumque dolor exercitationem officia, perferendis quis vel. Autem deserunt ea maiores quaerat quos temporibus! Aperiam dolorem dolores, eaque ex ipsam laborum minima nesciunt nulla porro quaerat vel?</p>");
});

#content {
  background-color: yellow;
  
  transition: width 1s, height 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab cupiditate debitis dolores dolorum ea, eligendi ex, expedita illum incidunt ipsum itaque neque optio quisquam quo vel veniam voluptatem voluptatibus, voluptatum.</p>

</div>

<button id="btn">click me</button>

Answer 1

您需要对 #content 使用掩码包装器，并对它应用 css 过渡，并使用 Javascript 更改它的高度。每次追加新内容（高度更改）时，您都需要从 #content 获取新高度。

var $contentMask = $('#contentMask');
var contentBoxId = '#content';
var currentHeight = getCurrentHeight(contentBoxId);
$contentMask.css('height', currentHeight);

$('#btn').on('click', function() {
  $(contentBoxId).append("<p>Ab atque aut cumque dolor exercitationem officia, perferendis quis vel. Autem deserunt ea maiores quaerat quos temporibus! Aperiam dolorem dolores, eaque ex ipsam laborum minima nesciunt nulla porro quaerat vel?</p>");
  currentHeight = getCurrentHeight(contentBoxId);
  $contentMask.css('height', currentHeight);
});

function getCurrentHeight(selector) {
 return $(selector).height();
}

#content {
  background-color: yellow;
}
#contentMask {
  overflow: hidden;
  transition: height 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contentMask">
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab cupiditate debitis dolores dolorum ea, eligendi ex, expedita illum incidunt ipsum itaque neque optio quisquam quo vel veniam voluptatem voluptatibus, voluptatum.</p>
  </div>
</div>

<button id="btn">click me</button>

您也可以在 jsfiddle 中看到它：https://jsfiddle.net/iamgutz/fsagbLn9/