子高度变化时包装器 div 的过渡高度答案

【问题标题】：Transition height of wrapper div when child height changes子高度变化时包装器 div 的过渡高度
【发布时间】：2015-01-17 07:29:50
【问题描述】：

所以我怀疑 CSS3 过渡不是解决此问题的方法，但这是我想要完成的：

在包装器/子 div 场景中，子 div 被换成了一个不同的、未知高度的 div。这会导致突然的高度变化。我希望高度变化能够平滑过渡，就像 CSS3 属性过渡一样。

这是垃圾箱： http://jsbin.com/hakanulodo/9/edit

为了解决链接失效问题，这里是 bin 的初始代码：

# HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrapper">
    <div class="child">
      Original
    </div>
  </div>
  <div class="new">
    New
  </div>
</body>
</html>

# css
.wrapper {
  transition: height 0.25s ease 0.2s;
}

.child {
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  background: purple;
  color: white;
}

.new {
  display: none;
  height: 200px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  background: blue;
  color: white;
}

# javascript
$('.wrapper').click( function() {
  var item = $('.new').css("display", "block");
  $('.wrapper').html(item);  
});

我对 JS 解决方案和 CSS 持开放态度。提前致谢！

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

您不能转换属性（'display' none 到 'block'）。
为什么要在 'wrapper' 类之外使用 div？只添加一个类并更改 div 的名称可以吗？

HTML：

<div class="wrapper">
    <div class="child">
      Original
    </div>
</div>

CSS：

.child {
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  background: purple;
  color: white;
  -webkit-transition: height 0.50s ease 0.2s;
  -moz-transition: height 0.50s ease 0.2s;
  transition: height 0.50s ease 0.2s;
}

.new {
  height: 200px;
  background: blue;
}

jquery：

$('.child').click( function() {
  $(this).addClass('new').html('New');
});

示例：http://jsbin.com/jivevasawi/1/edit?html,css,js,output

【讨论】：

感谢您的回复！ 1.我不是在转换显示属性，而是点。 2. 在这种情况下，我从服务器获取了一个全新的对象，我需要将其交换为占位符，因此更改类不是一种选择，尽管这肯定会更容易。
好的，这里是 jquery：jsbin.com/gazuhoxuli/1/edit?html,css,js,output
不错！这很聪明，我不知道.promise()。但是，您仍然需要知道最终的高度。有没有办法在不知道结束高度的情况下做到这一点？
因为我不知道你到底想做什么，所以我无法在这里看到大图并准确地得到你需要的结果，但如果你不知道高度，那就是将与新对象一起使用，您可以将 200 'px' 替换为变量，变量的值将从新对象获取高度。
在下一个示例中，我们有一个高度为 200 'px' 的新对象，我们得到它的高度（在本例中为 200 'px'）并将其放入 var 中。然后我们将新对象的高度设置为孩子的高度（对于动画的起点 - 在这种情况下为 100 'px'），当单击“包装器”时，新对象将在“包装器”内被删除，之后它将完成它将开始动画到新对象的原始高度（我们首先设置的变量）示例：jsbin.com/xuhodoyose/1/edit?html,css,js,output