平滑div重新定位與CSS轉換

頂部的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。

感謝您的建議。

來源

2012-09-03 frenchie

那麼，如果我知道這段代碼的目的，我可以舉一個更好的例子。所以我只會猜測。

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

這是不大不小的設置不當了切換的。然而，有好東西。您可以對動畫使用-webkit-transition或-moz或-o。你現在只需要考慮一個元素，並且可以改變該div的內容。

來源

2012-09-03 01:13:17 Chris

是的，這是破解它的一種方法：只保留一個頂部div，手動替換它的內容，然後重置其高度。我喜歡。與相對定位 – frenchie

您可以只更改內容和高度將自動設置。 – Chris

當您將鼠標懸停在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; 
}

來源

2014-08-21 12:49:54 Casey

平滑div重新定位與CSS轉換

回答

相關問題