Question

我想将Full Page Transition添加到我的项目中，看起来像单页应用程序，但我被卡住了。

我尝试了很多改造：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>

Answer 1

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>

ggmosaic

Answer 2

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

使用CSS进行页面转换

2 个答案: