javascript - 当内部内容改变尺寸时包装器的平滑过渡

Question

我有一些元素包含在一个包装 div 中。这些元素被打开和关闭，一次只显示一个。这些元素有不同的尺寸，当它们被切换时，开关真的很不稳定。

改变wrapper div的高度是否可以平滑过渡？

这似乎有点棘手，因为包装 div 的高度仅由包含在其中的元素定义。据我所见，这意味着普通的 css 过渡无法平滑过渡。

$('.tile').hide();
$('.tile').eq(0).show();

var toggle = 1;

$('button').click(function(){
	if(toggle == 1){
		$('.tile').hide();
		$('.tile').eq(toggle).show();
		toggle = 0;
	}else{
		$('.tile').hide();
		$('.tile').eq(toggle).show();
		toggle = 1;
	}
});

.tile{
	background-color:lightgreen;
	width:100px;height:100px;
	display:inline-block;
}

.tile:nth-child(2){
    background-color: orange;
	height:130px;
}

.wrap{
	background-color: lightblue;
	padding: 15px;
	float: left;
	transition: all .5s;
}

button{
	float: left;
	clear: both;
	margin:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrap">
	<div class="tile"></div>
	<div class="tile"></div>
</div>

<button>Swap</button>

Answer 1

这正确地平滑了包装器的过渡，但切换时大内容会溢出。

JS:

$('button').click(function(){
    //Fix the height to the current value
    $('.wrap').css('height', $('.wrap').height());
    //Toggle the contents
    $('.tile').toggleClass('hidden');
    //Set new height
    $('.wrap').animate({height: $('.tile:not(.hidden)').height()}, 0);
});

CSS:

.hidden {
  display: none;
}

.wrap {
  display: none;
}

fiddle :

https://jsfiddle.net/v3nLg257/4/