我想将整页转换添加到我的元素中，使其看起来像单页应用程序，但我被卡住了。
我用转换尝试了很多东西: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>关于javascript - 使用 CSS 进行页面转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48968761/