響應式地重疊2段

對於一個項目，我希望一些段落從一個文本內容轉換到另一個。我想用的方法是在我的HTML中有兩個段落，但一次只能看到一個段落。響應式地重疊2段

我有過渡工作正常，但我無法找到一種方式以一種響應方式重疊兩個段落。任何人都知道如何做到這一點？

這裏是我到目前爲止（所有我缺少的是響應段重疊）：

var a = document.getElementById("switch"); 
 
a.onclick = function() { 
 
    document.getElementById("container").classList.toggle("show1"); 
 
    document.getElementById("container").classList.toggle("show2"); 
 
    return false; 
 
}

#container { 
 
    border: 1px solid red; 
 
} 
 
.text1, 
 
.text2 { 
 
    transition: opacity 1s ease; 
 
    opacity: 0; 
 
    border: 1px solid blue; 
 
} 
 
.show1 > .text1, 
 
.show2 > .text2 { 
 
    opacity: 1; 
 
}

<div id="container" class="show1"> 
 
    <p class="text1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis. 
 
    </p> 
 
    <p class="text2"> 
 
    Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus. 
 
    </p> 
 
</div> 
 
<a id="switch" href="#">Switch paragraph</a>

如果這僅僅是一個糟糕的方式做到這一點，那麼請讓我知道。

我希望這是響應的原因，而不是依賴絕對定位或-104px的邊緣是因爲我想在除段落（按鈕，導航欄等）之外的其他事物上使用此方法，而不僅僅是因爲我希望它看起來不錯的一個小屏幕上:)

來源

2015-12-04 Arthur Busser

定位或利潤率是唯一理想的「疊加」的方法。您可能比使用疊加層更好地交換內容。 –

所以基本上你想讓紅色邊框的容器輕輕地改變高度，因爲內容x-fade？ –

@Paulie_D在我的項目中，我不會總是有大小相近的段落，在這種情況下，我不希望交換機改變我的頁面的整體佈局。雖然我確實同意更改內容會更簡單。 –

這是我能做的最適合你的描述。我們缺少太多的約束這裏在所有情況下正確地顯示疊加款...

var a = document.getElementById("switch"); 
 
a.onclick = function() { 
 
    document.getElementById("container").classList.toggle("show1"); 
 
    document.getElementById("container").classList.toggle("show2"); 
 
    return false; 
 
}

#container { 
 
    border: 1px solid red; 
 
    position: relative; 
 
} 
 
.text1, 
 
.text2 { 
 
    transition: opacity 1s ease; 
 
    opacity: 0; 
 
    border: 1px solid blue; 
 
} 
 
.show1 > .text1, 
 
.show2 > .text2 { 
 
    opacity: 1; 
 
} 
 

 
.show1 > .text2, 
 
.show2 > .text1{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
}

<div id="container" class="show1"> 
 
    <p class="text1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis. 
 
    </p> 
 
    <p class="text2"> 
 
    Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus. 
 
    </p> 
 
</div> 
 
<a id="switch" href="#">Switch paragraph</a>

來源

2015-12-04 15:06:07 AVAVT

它似乎完美地工作！非常感謝：） –

-1

如何切換display而不是opacity（儘管我也希望它看起來好一個小屏幕上！）：

var a = document.getElementById("switch"); 
 
a.onclick = function() { 
 
    document.getElementById("container").classList.toggle("show1"); 
 
    document.getElementById("container").classList.toggle("show2"); 
 
    return false; 
 
}

#container { 
 
    border: 1px solid red; 
 
} 
 
.text1, 
 
.text2 { 
 
    transition: display 1s ease; 
 
    display: none; 
 
    border: 1px solid blue; 
 
} 
 
.show1 > .text1, 
 
.show2 > .text2 { 
 
    display: block; 
 
}

<div id="container" class="show1"> 
 
    <p class="text1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis. 
 
    </p> 
 
    <p class="text2"> 
 
    Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus. 
 
    </p> 
 
</div> 
 
<a id="switch" href="#">Switch paragraph</a>

來源

2015-12-04 14:49:13 Rokin

我想保持淡入/淡出過渡，儘管它使事情變得更復雜。 –

即使段落隱藏與opacity: 0它們的大小仍然是由瀏覽器來計算。你需要讓它們彼此重疊。要做到這一點你需要結合display: none/block與opacity。

下面是一個例子： http://jsfiddle.net/xctLmLae/1/

來源

2015-12-04 15:11:52

響應式地重疊2段

回答

相關問題