显示/隐藏/添加元素时包装器的 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

关于您编辑的问题。您想在哪里插入内容或完全更改内容，我创建了一个新的fiddle。

在这个演示中，您有一个按钮，当您单击该按钮时，它会在包装器 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 颜色使动画可见，而 visibility: hidden 用于临时容器。请注意，您不能使用 display: none 因为在测量高度时会得到 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

我用一个简单的演示制作了一个 jsFiddle here。它利用了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/