如何使用CSS轉換切換重疊元素？

這裏的情景：我有四個單元重疊的一個的其他的父元素，像這樣：如何使用CSS轉換切換重疊元素？

<body class="one"> 
    <div id="overlapping"> 
     <div class="one">1</div> 
     <div class="two">2</div> 
     <div class="three">3</div> 
     <div class="four">4</div> 
    </div> 
    ...

的CSS看起來有點像這樣：

.one, .two, .three, .four { display: none; } 
body.one .one, 
body.two .two, 
body.three .three, 
body.four .four { 
    display: block; 
}

再有就是一些javascript和一些按鈕可以在「身體」上切換課程。

這很好，除了我想使用css轉換在塊之間切換。它們的高度不均勻（並且未知），所以我不能在高度上進行動畫製作。我寧願不硬編碼任何寬度爲responsive的原因，並且轉換不能在display仍然工作。

我不能visibility或opacity動畫，因爲重複的部分繼續，而隱藏或透明佔用空間佈局：即它們不是真正的重疊，除非那些看不見有display: none。

（一個工作解決方案是CSS來在#overlapping左上角的所有元素的位置，服從正常的文字環繞規則，在彼此的頂部，這樣#overlapping擴展以容納他們，如果他們不position: absolute。我還沒有找到這樣的方法。）

那麼我該如何爲開關設置動畫？有沒有用CSS的方法，還是我不得不求助於js動畫？

來源

2012-03-15 So8res

僅供參考，您的css解決方案相當於'#overlapping> div {display：none; } #overlapping> div.someclasstoadd {display：block; }' – Will 2012-03-15 04:13:49

我知道第一個是'#overlapping> div'，但我想在問題中更加明確。至於第二個，我不認爲你是正確的：'.one'類在主體上，而不是'＃overlapping'，因爲在主體中還有其他元素也在轉換。 – So8res 2012-03-15 04:18:29

好的，但是將嵌套div的類添加到body元素對我來說毫無意義。爲什麼不使用'body.displaytoggle #overlapping> div {display：block; }'？ – Will 2012-03-15 04:32:37

到目前爲止，我已經找到了最好的解決辦法如下（少語法）：

body { 
    #overflow > div 
    height: 0; 
    opacity: 0; 
    } 

    &.one .one, 
    &.two .two, 
    &.three .three, 
    &.four .four { 
    height: 100%; 
    opacity: 1; 
    } 
} 

#overflow { 
    overflow: hidden; 
    div { 
    transition: height .9s; 
    transition: opacity .9s; 
    overflow: hidden; 
    display: block; 
    } 
}

它發生在工作，因爲我所有的內心的div是相同的（儘管變量）的高度。我仍然喜歡一個通用的解決方案，但似乎沒有人知道。

來源

2012-03-15 15:44:04 So8res

我相信有可能在CSS3一些動畫，但我認爲它能夠更好地使用JQuery

谷歌jQuery的API .animate各地升技

$(".one").animate({opacity: 0.4, display: "block"} , 1500); 

$(".two").animate({opacity: 0.4, display: "none"} , 1500);

玩具什麼的變化？

它也可能有助於設置div的位置爲相對以重疊更好

我希望它可以幫助，如果不告訴我你還需要什麼

來源

2012-03-15 15:52:29 MakuraYami

謝謝。我正在尋找一個非jquery解決方案。我能夠解決下面的解決方案的問題，並通過調整標記，使得高度：100％是可取的。這發生在我身上，因爲我所有的重疊元素都有一個高度，但它仍然不是一個通用的解決方案。 – So8res 2012-03-20 18:09:42

如何使用CSS轉換切換重疊元素？

回答

相關問題