使用CSS的页面过渡

我想将整页过渡添加到我的项目看起来像单页应用程序，但我被卡住了。

我尝试了很多转换的事情：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>

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>

我想您希望看不到滚动，以创建退出效果？！如果是，则"溢出：隐藏"身体标签有助于=(

相关内容

最新更新

热门标签：