页面转换与CSS转换问题

Question

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

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

 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%)'; }); 

 body { margin: 0; } .container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .screen1 { position: absolute; width: 100%; height: 100%; background-color: blue; transition: transform .5s; } .screen2 { position: absolute; width: 100%; height: 100%; background-color: red; transform: translatex(100%); transition: transform .5s; } 

 <div class="container"> <div class="screen1"> <button id="toggle1">Toggle</button> </div> <div class="screen2"> <button id="toggle2">Toggle</button> </div> </div> 

我遇到的问题是：

• 在宽度为100％的元素中，我必须使用视口单位。 在其他情况下，100％将是两个屏幕。
• 固定位置的元素位于屏幕右侧，将采用第二个屏幕的正确值。 因此它不会显示。
• 我可以使用overflow-x: hidden隐藏滚动条overflow-x: hidden但用户可以随时滚动到下一个屏幕。

有某种方法可以解决此问题并维持“幻灯片”过渡？

Answer 1

将overflow:hidden属性添加到您的.container

Answer 2

只需添加overflow: hidden到您的容器即可。

 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%)'; }); 

 body { margin: 0; } .container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .screen1 { position: absolute; width: 100%; height: 100%; background-color: blue; transition: transform .5s; } .screen2 { position: absolute; width: 100%; height: 100%; background-color: red; transform: translatex(100%); transition: transform .5s; } 

 <div class="container"> <div class="screen1"> <button id="toggle1">Toggle</button> </div> <div class="screen2"> <button id="toggle2">Toggle</button> </div> </div>