html - 如何平滑地动画隐藏影响其他区域大小的侧边栏

Question

我有一个屏幕，其中有 3 个水平对齐的主要区域:



侧边栏 (1) 可以折叠/隐藏(向左)。隐藏时，释放的空间应分配给可视化 (3)，而菜单宽度 (2) 保持不变。

ATM 我正在​​对齐这样的内容:

(1), (2) & (3) 的父容器: display: flex

(1): width: 260px;

(2): width: 293px;

(3): flex: 1;

折叠时，我只需设置 width: 0对于侧边栏。

我知道我可以简单地动画/转换 width通过更改和动画/转换 left 来更改或着手处理它属性或使用边距等，但我能想到的所有这些解决方案都会触发浏览器布局步骤(更改 width 、 left 、 margin 、...)动画性能解释 here .

理想情况下，我想继续使用仅触发浏览器组合步骤的属性的 CSS 转换，如 translate等等。

不幸的是，我想不出一种方法来只使用那些“好”的 CSS 属性，同时满足我将释放的空间从隐藏的侧边栏重新分配到可视化 (3) 的目标。

甚至可以隐藏左侧的动画侧边栏而不触发重新布局但仍然重新分配释放的空间？如果没有，这仍然如何高效地完成？

我想这在 Web 开发中是一个非常常见的用例，因此也欢迎提供指向相关文献、博客等的链接!

我在网上找到了很多关于侧边栏动画隐藏的例子，但它们要么是动画 width属性或不将释放的空间重新分配给剩余的可见内容(例如，侧边栏仅显示在主要内容的“上方”等)，因此到目前为止我发现的所有示例都没有真正满足我描述的目标......

Answer 1

请检查以下HTML , JS , CSS片段。您可以更改元素的实际宽度以与您需要的完全匹配。
操纵width侧边栏不是问题。性能，如 link 中所述你提供的。在这篇文章的最后一行是这样写的:

Performance matters to users. Web developers need to build apps thatreact quickly and render smoothly. Google performance guru Paul Lewisis here to help you destroy jank and create web apps that maintain 60frames per second performance. You'll leave this course with the toolsyou need to profile apps and identify the causes of jank. You'llexplore the browser's rendering pipeline and uncover patterns thatmake it easy to build performant apps.

因此，您可以使用 Javascript 重新创建以下示例的逻辑 requestAnimationFrame如图 here .

const side = document.querySelector('.side');
const sideToggle = document.querySelector('.sideToggle');
const main = document.querySelector('.main');
sideToggle.addEventListener('click', () => {
  if (!sideToggle.classList.contains('active')) {
    sideToggle.classList.add('active');
  } else {
    sideToggle.classList.remove('active');
  }

  if (!main.classList.contains('full')) {
    main.classList.add('full');
  } else {
    main.classList.remove('full');
  }
  if (!side.classList.contains('hidden')) {
    side.classList.add('hidden');
  } else {
    side.classList.remove('hidden');
  }
});

.container {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  align-content: space-evenly;
  justify-content: space-evenly;
  width: 100%;
}

.side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: space-evenly;
  justify-content: space-evenly;
  background: #000;
  padding: 0;
  width: 20%;
  height: 100vh;
  transition: width 1s linear;
}

.side a {
  color: #fff;
  text-decoration: none;
  line-height: 1;
  height: 1.5rem;
  padding: 1rem;
}

.side a:hover {
  color: #000;
  background: #fff;
}

.side.hidden {
  width: 0;
  transition: width 1s linear;
}

.sideToggle {
  background: #000;
  color: #fff;
  width: 2rem;
  height: 2rem;
  position: fixed;
  right: .75rem;
  bottom: .75rem;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  z-index: 1001;
}

.sideToggle:after {
  content: "\2630";
  font-size: 1.25rem;
  vertical-align: top;
}

.sideToggle.active:after {
  content: "\00D7";
  vertical-align: top;
  font-size: 1.75rem;
}

.main {
  background: red;
  width: 80%;
  height: 100vh;
  transition: width 1s linear;
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  align-content: space-evenly;
  justify-content: space-evenly;
  width: 100%;
  color: #fff;
}

.main.full {
  width: 100%;
  transition: width 1s linear;
}

.left {
  width: 15rem;
  padding: 1rem;
}

.right {
  width: calc(100% - 15rem);
  background: indigo;
  padding: 1rem;
}

<div class="container">
  <div class="side">
    <a href="#">Home</a>
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
    <a href="#">Page 3</a>
  </div>
  <span class="sideToggle active"></span>
  <div class="main">
    <div class="left">
        this width is ment to be static
    </div>
    <div class="right">
        this width is ment to be dynamic 
    </div>
  </div>
</div>

这是另一种可能的方法，主要使用 translateX并且不改变 width的侧边栏。

const side = document.querySelector('.side');
const sideToggle = document.querySelector('.sideToggle');
const main = document.querySelector('.main');
sideToggle.addEventListener('click', () => {
  if (!sideToggle.classList.contains('active')) {
    sideToggle.classList.add('active');
  } else {
    sideToggle.classList.remove('active');
  }

  if (!main.classList.contains('full')) {
    main.classList.add('full');
  } else {
    main.classList.remove('full');
  }
  if (!side.classList.contains('hidden')) {
    side.classList.add('hidden');
  } else {
    side.classList.remove('hidden');
  }
});

.container {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  align-content: space-evenly;
  justify-content: space-evenly;
  width: 100%;
}

.side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: space-evenly;
  justify-content: space-evenly;
  background: #000;
  padding: 0;
  width: 7rem;
  transform: translateX(0);
  height: 100vh;
  transition: transform 1s linear, z-index 1s linear;
  z-index: 9999;
  position: fixed;
  left: 0;
  top: 0;
  will-change: transform, z-index;
}

.side a {
  color: #fff;
  text-decoration: none;
  line-height: 1;
  height: 1.5rem;
  padding: 1rem;
}

.side a:hover {
  color: #000;
  background: #fff;
}

.side.hidden {
  transform: translateX(-100%);
  transition: transform 1s linear, z-index 1s linear;
  z-index: -1;
}

.sideToggle {
  background: #000;
  color: #fff;
  width: 2rem;
  height: 2rem;
  position: fixed;
  right: .75rem;
  bottom: .75rem;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  z-index: 1001;
}

.sideToggle:after {
  content: "\2630";
  font-size: 1.25rem;
  vertical-align: top;
}

.sideToggle.active:after {
  content: "\00D7";
  vertical-align: top;
  font-size: 1.75rem;
}

.main {
  background: red;
  width: calc(100% - 7rem);
  height: 100vh;
  transition: transform 1s linear, width 1s linear;
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  align-content: space-evenly;
  justify-content: space-evenly;
  color: #fff;
  left: 0;
  top: 0;
  transform: translateX(7rem);
  position: absolute;
  will-change: transform, width;
}

.main.full {
  transform: translateX(0);
  width: 100%;
  transition: transform 1s linear, width 1s linear;
}

.main .left,
.main.full .left {
  flex-grow: 1;
  flex-shrink: 1;
  width: 15rem;
  padding: 1rem;
}

.right {
  flex-grow: 2;
  flex-shrink: 2;
  width: calc(100% - 15rem);
  background: indigo;
  padding: 1rem;
}

<div class="container">
  <div class="side">
    <a href="#">Home</a>
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
    <a href="#">Page 3</a>
  </div>
  <span class="sideToggle active"></span>
  <div class="main">
    <div class="left">
      this width is ment to be static
    </div>
    <div class="right">
      this width is ment to be dynamic
    </div>
  </div>
</div>