横向转换页面

Question

我有一个基本上有 2 个页面的网站。总共有 3 个部分，第一页显示左侧和中间，第二页显示中间和右侧。我想知道是否有一种简单的方法可以在两页之间水平过渡。过渡看起来像这样：

当您需要调整 window 的大小时，会出现一个额外的问题。在这种情况下，A 和 C 部分应该变大，并且过渡应该相应地改变，而 B 是固定宽度。

我认为最好的方法是创建一个页面，因为加载会破坏沉浸感，但如果由于响应式网页设计而创建 2 个页面更简单，那就没问题了。我能想到的最简单的方法是将用户相机侧向移动，但响应式网页设计使它变得复杂。

Answer 1

一旦我们知道 B 的宽度，我们就可以将整个内容设置为列。

此代码段使用网格来执行此操作，第一个和第三个项目占据视口中剩余的 space。

通过使用 CSS calc 来确定来回移动必须平移的量，整个过程是响应式的，并且会适应不同的 viewport/device 宽度。

* {
  margin: 0;
}

body {
  overflow: hidden;
}

button {
  position: fixed;
  z-index: 1;
}

.container {
  /* set the width of the second item */
  --bW: 200px;
  width: calc(2 * (100vw - var(--bW)) + var(--bW));
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr var(--bW) 1fr;
  transform: translateX(0);
  transition: transform 1s ease;
  overflow: hidden;
}

.slid {
  transform: translateX(calc(-100vw + var(--bW)));
}

.container>* {
  height: 100%;
  display: inline-block;
}

.container> :nth-child(1) {
  background: magenta;
}

.container> :nth-child(2) {
  background: purple;
}

.container> :nth-child(3) {
  background: teal;
}

<button onclick="document.querySelector('.container').classList.toggle('slid');">CLICK ME TO SLIDE</button>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

横向转换页面

Transition a page sideways

html

javascript

css

css-transitions