子高度变化时包装器 div 的过渡高度
Posted
技术标签:
【中文标题】子高度变化时包装器 div 的过渡高度【英文标题】：Transition height of wrapper div when child height changes 【发布时间】：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 持开放态度。提前致谢！
【问题讨论】：
【参考方案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以上是关于子高度变化时包装器 div 的过渡高度的主要内容，如果未能解决你的问题，请参考以下文章
可滚动 div 和固定底部 div 如何在包装器内动态更改高度？