javascript - 在 CSS 转换后用新内容替换空白区域

Question

情况是这样的:

• 有 3 个内容不同的页面。
• 所有这些页面都有指向其余页面的链接。
• 当您点击其中之一时，实际页面会淡出，所需的页面会通过 JavaScript 触发的 CSS 转换淡入视口(viewport)。

到目前为止一切顺利，问题是什么？

• 新页面不会取代旧页面空间和位置，它保持在旧页面下方。

我想要达到的预期效果是当您单击一个新页面时，它会淡入到与旧页面完全相同的位置，而不是只出现在下方并在上方留下一个空白空格。

$('.btn').click(function(e) {
  e.preventDefault();
  var $target = $(this);
  var $next = $('#' + $(this).attr('href'));
  $target.parent().removeClass('show');
  $target.parent().addClass('hide');
  $next.removeClass('hide');
  $next.addClass('show');
});

.hide {
  opacity: 0;
  transition: all 1s ease;
}

.show {
  opacity: 1;
  transition: all 1s 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page1" class="show">
  Page 1 Content
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>

<div id="page2" class="hide">
  Page 2 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>

<div id="page3" class="hide">
  Page 3 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
</div>

• 注意:我已经尝试过使用 position: absolute 但不知何故它有一个错误。同样使用 display: none 但这不允许转换/动画，淡出/淡入是必须的。

非常感谢您的时间和努力!请帮助我!

Answer 1

略有变化

$('.btn').click(function(e) {
  e.preventDefault();
  var $target = $(this);
  var $next = $('#' + $(this).attr('href'));
  $('.page').removeClass('show').addClass('hide');
  $next.removeClass('hide').addClass('show');
});

.page {
  position: absolute;
  top: 0;
  transition: all 1s ease;
}
.page.hide {
  opacity: 0;
}
.page.show {
  opacity: 1;
  z-index: 999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="page1" class="show page">
  Page 1 Content
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>

<div id="page2" class="hide page">
  Page 2 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>

<div id="page3" class="hide page">
  Page 3 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
</div>