2

当我添加一些改变内容长度的东西时，我想控制容器的自动高度变化。现在，如果我对内容应用 innerHTML 更改，则高度会相应更改。我想对该高度变化应用过渡。我怎样才能做到这一点？（我也可以使用 jQuery ）

4

3 回答 3

12

记录改变内容前的高度，改变内容，记录之后的高度，设置高度为前者的高度，动画为后者的高度。动画完成后，再次将高度设置为自动。您可以使用height和来做到这一点animate。

在 JSFiddle 上试试。

var texts = [
    "This is just some sample text that's being used to demonstrate animating the height when content changes.",
    "Shorter."
];

var div = $('div').click(changeContent);

function changeContent() {
    var oldHeight = div.height();
    texts.push(div.text());
    div.text(texts.shift());
    var newHeight = div.height();
    div.height(oldHeight);
    div.animate({height: newHeight}, 'fast', function() {
        div.height('auto');
    });
}
div {
    width: 150px;
    background: lightgray;
    overflow-y: hidden;
}
<div>This is some example content.</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

于 2012-11-11T00:46:26.347 回答
0 
<div id="containter" style="overflow:hidden">
<div>
 Content.....
</div>
</div>

//add something...
$('#container').animate({height:$('#container').content().outerHeight()});

或者：

 $('#container').animate({height:$('#container').children().first().outerHeight()});

并在容器内添加附加到 div 时：

$('#container').children().first().append(somethingNew);
于 2012-11-11T00:49:52.840 回答
0

基于icktoofay 的回答。

我在更改高度时禁用了按钮并添加了淡入淡出效果。此解决方案对于更新产品过滤器等很有用。

我也检查了box-sizing财产。如果是这样，box-sizing那么当新内容具有相同的高度时，我会newHeight通过.outerHeigth()而不是.height()防止高度波动。您可以检查这种情况，例如通过将random变量设置为 value 5。原因是

.height()无论 CSS box-sizing 属性的值如何，都将始终返回内容高度。

代码笔

$('#button').click(function() {
  var $button = $(this),
      buttonOriginalText = $button.html();
  $button.prop('disabled', true).html('Updating...');
  $('#content').animate({
    opacity: 0
  }, 'fast', function() {
    var newHeight,
        $content = $(this),
        oldHeight = $content.height();
    $content.html(getRandomContent());
    newHeight = ('border-box' === $content.css('box-sizing') ? $content.outerHeight() : $content.height());
    $content.height(oldHeight).animate({
      height: newHeight,
      opacity: 1
    }, 'slow', function() {
      $content.height('auto');
      $button.prop('disabled', false).html(buttonOriginalText);
    });
  });
});

function getRandomContent() {
  var random = 1 + Math.round(Math.random() * 11), // 1..12
      paragraph = '<p>Paragraph</p>';
  return paragraph.repeat(random);
}
* {
  box-sizing: border-box;  /* comment out to test "content-box" */
  font: 16px Helvetica, 'sans-serif';
}

.content {
  counter-reset: content;
  padding: 6px 18px;
}

.content p {
  counter-increment: content;
}

.content p:after {
  content: ' ' counter(content) '.';
}

.content-box {
  border: 2px solid red;
  margin-top: 24px;
  max-width: 220px;
}
<button id="button" class="button">Update the content</button>
<div class="content-box">
  <div id="content" class="content">Animatie the automatic height when content is resized.</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

于 2019-11-09T08:38:18.537 回答