javascript - 带有 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但用户可以随时滚动到下一个屏幕。

有什么方法可以解决这个问题并保持“幻灯片”过渡？

标签： javascriptcss

Answer 1

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