Ответьте на 2 абзаца

Question

Для проекта я хотел бы, чтобы некоторые абзацы переходили из одного текстового контента в другой. Метод, который я хотел бы использовать, состоит в том, чтобы иметь два абзаца в моем HTML, но только одно видно за раз.

У меня есть переход, работающий нормально, но я не могу найти способ совместить два абзаца в ответном порядке. Кто-нибудь знает, как сделать эту работу?

Вот что я до сих пор (все, что я пропускаю это ответная пункт перекрытия):

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, заключается в том, что я хотел бы использовать этот метод для других целей, кроме абзацев (кнопок, navbars и т. Д.), А не только потому что я хочу, чтобы хорошо выглядеть на небольшом экране :)

Answer 1

Это лучшее, что я могу сделать, что соответствовало бы вашему описанию. Мы не хватаем слишком много сдерживаем здесь, чтобы правильно отобразить наложенный пункт во всех случаях ...

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>

Answer 2

Как насчет переключения 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>

Answer 3

Даже если абзацы скрыть с opacity: 0 их размером по-прежнему рассчитываются в вашем браузере. Вы должны заставить их пересекаться друг с другом. Для этого вам необходимо комбинироватьdisplay: none/block с opacity.

Вот пример: http://jsfiddle.net/xctLmLae/1/