显示/隐藏/添加元素时包装器的 CSS 过渡

Question

我有一个div，其中包含一些隐藏的元素和一些可见的元素。

现在，当我显示其中一个隐藏元素(或隐藏可见元素)时，包装div 的高度会发生变化。我也可以向div 添加新元素。

例：

<div class="wrapper">
<div id="inner1">Hallo1</div>
<div id="inner2">Hallo2</div>
<div id="inner3">Hallo3</div>
</div>

现在我想对包装div 的高度变化进行动画处理。

我玩了jquery效果和css3过渡，但我可以让它工作..

编辑：这里有一个小提琴作为我所拥有的例子：

http://jsfiddle.net/6rhqX/2/

现在我想在新元素出现时"平滑"包装器。

编辑：也许我过于简单地提出了我的问题，忘记提及一些事情..

我不想对内部div 进行动画处理，我想在删除/添加/隐藏/显示包装器中的某些内容时"自动"对包装器进行动画处理。

例如，我希望能够将div 的整个内容与其他内容"交换"，并希望对新高度的更改进行动画处理......

Answer 1

关于您编辑的问题。在您想要插入内容或完全更改内容的地方，我做了一个新的小提琴。

在这个演示中，你有一个按钮，当你点击它时，它会在包装器div 中添加另外两个 Lorem Ipsum 段落。它以一种首先将div 动画化到适当高度然后添加内容的方式执行此操作。您可以多次单击该按钮，每次它都会添加演示内容的新块。

HTML 标记： (您应该注意的是，我为可见性设置为隐藏的内容使用了临时容器。

<a href="#" id="change_content">Add content</a>
<div id="wrapper">
<div class="content_box">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
<div id="temp_content"></div><!-- Container for temporary content -->

CSS(只是在这里使用了bg颜色使动画可见，可见性：隐藏为临时容器。请注意，您不能使用显示：无，因为在测量高度时会得到 0)

#wrapper {background-color: orange;}
.content_box {width: 400px; background-color: green;}
#temp_content {width: 400px; visibility: hidden;}

jQuery(我在这里注释了代码)

$(document).ready(function() {
$('#change_content').click(function(e) {
/*Some demo content here. Two new paragraphs wrapped in the div with content_box
class. If it wasn't wrapped in the content_box class. In order to get correct
height you should have temporary container width same as desired target
container width so the content fills up properly.*/
var new_content = '<div class="content_box"><p>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
culpa qui officia deserunt mollit anim id est laborum.</p></div>';
//insert the new content inside the temporary container.
$('#temp_content').html(new_content);
//calculate the temporary container height
var new_content_height = $('#temp_content').height();
//calculate current content height
var existing_content_height = $('#wrapper').height();  
//add two heights together
var target_height = new_content_height + existing_content_height + 'px';        
$('#wrapper').animate({
height: target_height
}, 1000, function() {
//after the animation is over insert the content to the wrapper
$('#wrapper').append(new_content);
//its not obligatory but lets empty the temporary container
$('#temp_content').empty();
});    
});
});

希望对您有所帮助。

编辑：有错误的小提琴链接。它现在正确指向。

Answer 2

我在这里做了一个简单的演示。它利用了jQuery的slideUp()和slideDown()函数。按下链接将显示/隐藏div 并适当地移动滑动包装器div，或者您可以添加附加和向下滑动的元素以及包装器div。

我在演示中使用的 HTML 标记：

<ul class="buttons">
<li><a href="#first_box">First box</a></li>
<li><a href="#second_box">Second box</a></li>
<li><a href="#third_box">Third box</a></li>
</ul>
<a href="#" id="add_element">Add Element</a>
<div id="wrapper">
<div id="first_box">
Got some cool content here.
</div>
<div id="second_box">
Also some cool content.
</div>
<div id="third_box">
And a third box.
</div>
</div>

CSS：

#wrapper {background-color: black;}
#first_box {width: 400px; height: 300px; background-color: green;}
#second_box {width: 400px; height: 300px; background-color: red; display: none;}
#third_box {width: 400px; height: 300px; background-color: blue; display: none;}

.new_element {宽度：400px;高度：200px;背景颜色：橙色;显示：无;}

JQuery：

$(document).ready(function() {
$('.buttons a').click(function(e) {
e.preventDefault();
var target_box = $(this).attr('href'); // get the target box id
//check if box is currently visible or hidden
if($(target_box).is(':hidden')) {
//if div is hidden slide it down (show it) and wrapper slides down with it
$(target_box).slideDown(1000);     
} else {
//if div is visible hide it by sliding it up, wrapper slides up with it
$(target_box).slideUp(1000);
}
});    
$('#add_element').click(function(e) {
var new_div = $('<div class="new_element">New element</div>');
$('#wrapper').append(new_div);
});
});

希望对您有所帮助。

Answer 3

jQuery有一个名为slideDown的方便函数，可以执行您想要的动画。

这将找到第一个隐藏的div并将其动画化：http://jsfiddle.net/6rhqX/4/