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。

目标是使黄色div顺利移动。我可以用jquery做到这一点，但我想知道是否有办法让它只用CSS工作。

感谢您的建议。

Answer 1

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

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

这是一种设置不佳的切换。不过有好东西。您可以使用-webkit-transition或-moz或-o作为动画。你现在也只需要考虑一个元素，只需要改变那个div的内容。

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

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

2 个答案: