使用CSS过渡实现平滑的div重新定位

Question

我有3个div。前两个在第三个上面。

顶部的div高度不同，每次只有一个可见：它们切换可见性。因为它们高度不同，当这两个div切换时，会导致底部的第三个div在顶部位置上移。我想知道是否有一种使用CSS过渡来使第三个div移动平滑的方法。

这是HTML：

<div id="Toggle">click here</div>

<div id="InnerDiv1"></div>
<div id="InnerDiv2"></div>

​<div id="BottomDiv"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

这是CSS代码：

#InnerDiv1{
    height:30px;
    width:200px;
    background:red;
    margin:10px 10px;   
    clear:both;}

#InnerDiv2{
    height:60px;
    width:200px;
    background:blue;
    margin:10px 10px;
    clear:both;    
    display:none;}

#BottomDiv{
    height:60px;
    width:200px;
    background:yellow;
    margin:10px 10px;
    transition:all 2s ease;}

以下是切换的jQuery代码：

$('#Toggle').click(function() {
    $('#InnerDiv1').toggle();
    $('#InnerDiv2').toggle();
});​

这里有一个jsfiddle链接，方便大家查看：http://jsfiddle.net/gfv5t/。

目标是让黄色区块平滑移动。用jquery可以实现，但我想知道是否有只使用CSS实现的方法。

感谢您的建议。

- frenchie

Answer 1

如果我知道这段代码的目的，我可以给出更好的例子，所以我只好猜测。

http://jsfiddle.net/35USv/1/

这是一种糟糕设置的切换方式。但有些东西还是不错的。你可以使用-webkit-transition或-moz或-o进行动画。现在你只需要考虑一个元素，就可以改变该div的内容了。

- Chris

---

是的，这是一种黑客方式：只需保留一个顶部div，手动替换其内容，然后重置其高度。我喜欢它。 - frenchie

通过使用相对定位，您只需更改内容，高度将自动设置。 - Chris

Answer 2

当你将鼠标悬停在innerDv1上时，这将使其正常工作。希望能对你有所帮助。

#InnerDiv1{
   height:30px; 
    height:30px;
    width:200px;
    background:red;
    margin:10px 10px;   
    clear:both;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;}
#InnerDiv1:hover {
   height:60px; 
    height:60px;
    background:blue;
}

- Casey