javascript - 响应地重叠 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 边距的原因是因为我想在段落以外的其他事物(按钮、导航栏等)上使用此方法，而不仅仅是因为我希望它在较小的屏幕上看起来不错(即使我确实希望它在较小的屏幕上看起来不错!):)

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>