Javascript 带有CSS转换问题的页面转换

我想在两页之间做一个简单的转换。动画应该是从右向左移动到第二页，然后从左向右返回到第一页

我已经这样做了，但问题是重复了页面的宽度

const screen1=document.getElementsByClassName（'screen1'）[0]；
const screen2=document.getElementsByClassName（'screen2'）[0]；
document.getElementById（'toggle1'）。addEventListener（'click'，（）=>{
screen1.style.transform='translatex（-100%）；
screen2.style.transform='translatex（0）'；
});
document.getElementById（'toggle2'）。addEventListener（'click'，（）=>{
screen1.style.transform='translatex（0）'；
screen2.style.transform='translatex（100%）'；
});
正文{
保证金：0；
}
.集装箱{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.屏幕1{
位置：绝对位置；
宽度：100%；
身高：100%；
背景颜色：蓝色；
转变：转变；
}
.屏幕2{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：红色；
转化：translatex（100%）；
转变：转变；
}

切换
切换
将
溢出：隐藏
属性添加到您的
.container
将
溢出：隐藏
属性添加到您的
.container
只需将
溢出：隐藏
属性添加到您的容器中即可


const screen1=document.getElementsByClassName（'screen1'）[0]；
const screen2=document.getElementsByClassName（'screen2'）[0]；
document.getElementById（'toggle1'）。addEventListener（'click'，（）=>{
screen1.style.transform='translatex（-100%）；
screen2.style.transform='translatex（0）'；
});
document.getElementById（'toggle2'）。addEventListener（'click'，（）=>{
screen1.style.transform='translatex（0）'；
screen2.style.transform='translatex（100%）'；
});
正文{
保证金：0；
}
.集装箱{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
溢出：隐藏；
}
.屏幕1{
位置：绝对位置；
宽度：100%；
身高：100%；
背景颜色：蓝色；
转变：转变；
}
.屏幕2{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：红色；
转化：translatex（100%）；
转变：转变；
}

切换
切换
只需将
溢出：隐藏
添加到您的容器中即可


const screen1=document.getElementsByClassName（'screen1'）[0]；
const screen2=document.getElementsByClassName（'screen2'）[0]；
document.getElementById（'toggle1'）。addEventListener（'click'，（）=>{
screen1.style.transform='translatex（-100%）；
screen2.style.transform='translatex（0）'；
});
document.getElementById（'toggle2'）。addEventListener（'click'，（）=>{
screen1.style.transform='translatex（0）'；
screen2.style.transform='translatex（100%）'；
});
正文{
保证金：0；
}
.集装箱{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
溢出：隐藏；
}
.屏幕1{
位置：绝对位置；
宽度：100%；
身高：100%；
背景颜色：蓝色；
转变：转变；
}
.屏幕2{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：红色；
转化：translatex（100%）；
转变：转变；
}

切换
切换
FYI:
document.getElementsByClassName（'screen1'）[0]
应该是：
document.querySelector（'.screen1'）
.getElementsByClassName（）
返回一个活动节点列表，这可能非常低效，而且您对节点列表不感兴趣-您正在寻找一个节点，因此查找所有节点也是一种浪费。感谢@ScottMarcus的提示，这是我的一个自定义，但我会更改它。仅供参考：
文档。getElementsByClassName（'screen1'）[0]
应该是：
document.querySelector（'.screen1'）
.getElementsByClassName（）
返回一个活动节点列表，这可能会非常低效，而且您对节点列表不感兴趣-您正在寻找一个节点，因此查找所有节点也是一种浪费。感谢@ScottMarcus的提示，这是我的自定义，但我会更改它。谢谢您，只是没有在我的项目中工作。第一次在没有容器的情况下进行测试（只是在每个屏幕中建立
溢出
属性）。然后我没有用容器测试
溢出
属性。我将在我的项目中检查发生了什么，因为添加一个带有
溢出的容器将隐藏容器内所有带有
位置：绝对
的div。但这是正确的方法。我在我的项目中修复了这个问题，在代码片段中我使用了top/left/right-bottom属性。在我的项目中，我只使用了100%的宽度，导致容器中的绝对元素被隐藏。如果不使用
overflow
可以看到这些元素，但是如果使用它，这些元素就会消失。谢谢，我的项目中没有使用这些元素。第一次在没有容器的情况下进行测试（只是在每个屏幕中建立
溢出
属性）。然后我没有用容器测试
溢出
属性。我将在我的项目中检查发生了什么，因为添加一个带有
溢出的容器将隐藏容器内所有带有
位置：绝对
的div。但这是正确的方法。我在我的项目中修复了这个问题，在代码片段中我使用了top/left/right-bottom属性。在我的项目中，我只使用了100%的宽度，导致容器中的绝对元素被隐藏。如果不使用
溢出
可以看到这些元素，但如果使用它，这些元素将消失。