Question

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

当包装div的高度改变时，是否可以平滑过渡？

这似乎有点棘手，因为换行div的高度仅由其中包含的元素定义。从我所看到的情况来看，这意味着正常的css转换无法平滑过渡。

＆＃13;

$('.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;
	}
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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;
}

小提琴：

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

Answer 2

我会提供不同的选项，但我建议您稍微更改它以适应您的流程。我写了一个快速的jsfiddle，应该证明它是如何工作的。但实际上，您使用jquery的animate()方法来减缓高度之间的过渡。随着收缩，另一个将扩大，反之亦然。检查我们的here。确保将一些过程抽象为单独的函数。仅将我的代码用作概念证明。

Answer 3

我不知道是否可以在两个独立的元素之间进行转换。相反，我会在tile上的课程之间切换。 jQuery有一个方便的toggleClass()函数，因此当单击该按钮时，它会根据需要添加或删除该类。然后正确设置添加的类的样式。

$('button').click(function(){
    $(".tile").toggleClass("toggle")
});

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

.tile.toggle{
  background-color: orange;
  height:130px;
}

.wrap{
  background-color: lightblue;
  padding: 15px;
  float: left;
}

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>

<button>Swap</button>

Answer 4

在jQuery.animate()的帮助下，在同一元素上不使用任何类，您可以执行以下操作：

var long = false;
$('button').click(function () {
     long = !long;
     if (long)
         $('div').animate({'height' : '+=50px'}, 500);
     else
         $('div').animate({'height' : '-=50px'}, 500);
  });

div { height: 100px; width: 100px; border: solid 2px gray; background-color: beige }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle</button>
<br><br>
<div>Div</div>

如果您有单独的元素，请执行以下操作：
- 最初使两个div具有相同的高度
- 单击时，隐藏上部div，并设置第二个div的动画高度 - 再次单击时，为第二个div设置动画，然后显示第一个div

当内容改变维度时，包装器的平滑过渡

4 个答案: