使用 CSS 进行页面转换答案

【问题标题】：Page transition with CSS使用 CSS 进行页面转换
【发布时间】：2018-02-24 23:37:19
【问题描述】：

我想在我的项目中添加全页转换，使其看起来像单页应用程序，但我被卡住了。

我尝试了很多关于变换的东西：translateX 和 transition 和 display: none，但它不能按我的意愿正常工作..

var firstDiv = document.querySelector('#first'),
    secondDiv = document.querySelector('#second'),
    transitionBtn = document.querySelector('#transitionBtn');

function myFunction() {
    firstDiv.classList.remove('active');
    secondDiv.classList.add('active');
}

transitionBtn.addEventListener('click',myFunction);

body {
  padding: 0;
  margin: 0;
}
#first {
  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color: red;
}

#second {  
  background-color: blue;
}

.page{
  width: 100vw;
  height: 100vh;
  transform: translateX(100%);
  display: none;
  transition: ease-in-out 2s all;
}

.page.active {
  transform: translateX(0%);
  display: flex !important;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="first" class="page active">
    <button id="transitionBtn">Click me to transition</button>
  </div>
  <div id="second" class="page"></div>
</body>
</html>

【问题讨论】：

什么是不工作的？该演示似乎运行良好。
第一页应该消失并显示：无，第二页应该出现，但现在我们甚至看不到它。
我看到在myfunction() 中，您从两个div 中删除了名为active 的类，但您没有再次将它添加到其中任何一个！还是我错了？
Shady Boshra，我复制时出错了，我的错，但即使使用这个 firstDiv 在转换后仍然可见。

标签： javascript html css css-transitions transition

【解决方案1】：

var firstDiv = document.querySelector('#first'),
    secondDiv = document.querySelector('#second'),
    transitionBtn = document.querySelector('#transitionBtn');

function myFunction() {
    firstDiv.classList.remove('active');
    secondDiv.classList.add('active');
}

transitionBtn.addEventListener('click',myFunction);

body {
  padding: 0;
  margin: 0;
  overflow:hidden;
  
}
#first {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

#second {  
  background-color: blue;
  transform: translateX(-100%);
}

.page{
  width: 100vw;
  height: 100vh;
  transform: translateX(100%);
  transition: ease-in-out 2s all;
  position:absolute;
}

.page.active {
  transform: translateX(0%) !important;
  display: flex !important;
}

 <div id="first" class="page active">
    <button id="transitionBtn">Click me to transition</button>
  </div>
  <div id="second" class="page"></div>

【讨论】：

【解决方案2】：

我想你希望没有滚动可见，以创建退出效果？！如果是，那么body标签上的“溢出：隐藏”会有所帮助=）

【讨论】：