Question

我有一个div，它改变了它在AJAX调用（引用机器）上的内容。在div和它的父母身上没有指定任何CSS height。我为div应用了以下CSS：

height: auto
-moz-transition: all 3s linear
-webkit-transition: all 3s linear
transition: all 3s linear

但这是无效的。这是一个用于视觉呈现的JSfiddle：https://jsfiddle.net/Lanti/mfbeLa2d/22/

修改

我在这里包括了小提琴：

＆＃13;

$(document).ready(function () {
  $("#getMessage").on("click", function () {
    $("#changeThis").html("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.");
  });
});

＆＃13;

body {
  background-color: #777;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.child {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  max-width: 200px;
  padding: 50px;
  border-radius: 3px;
  background-color: #fff;
  
  height: auto
  -moz-transition: all 3s linear
  -webkit-transition: all 3s linear
  transition: all 3s linear
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="content">
  <div class="child" id="changeThis">
    This div's height will change on button click.
  </div>
  <button type="button" class="button" id="getMessage">Button</button>
</div><!-- .content -->

＆＃13;

Answer 1

使用jQuery animate函数

HTML和CSS可以保持不变，但您的JS应该按如下方式更新：

$(document).ready(function () {
  $("#getMessage").on("click", function () {
    $("#changeThis").animate({height:$(window).height()},500).html("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.");
  });
});

我添加了动画功能，您可以调整速度（此处设置为500），在此处阅读有关动画功能的更多信息：http://api.jquery.com/animate/请注意，动画会在添加文本之前进行。

还添加了要设置为$(window).height()的高度，以便框扩展到视口的整个高度。

Div未知高度平滑过渡

1 个答案:

Updated fiddle here