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隐藏滚动条，但用户可以随时滚动到下一个屏幕。

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

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>

页面转换与CSS转换问题

2 个答案: