替代网格布局过渡

Question

这是一种非常常见的动画类型 - 打开/关闭侧边栏：

document.querySelector('.toggle').addEventListener('click', e =>
  document.body.classList.toggle('no-aside')
)

body {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: minmax(50px, 200px) auto;
  grid-template-areas: "aside main";
  margin: 0;
  width: 100vw;
  height: 100vh;
  transition: grid-template-columns .25s;
}

body.no-aside {
  grid-template-columns: 50px auto;
}

aside {
  background: #111;
  color: #fff;
}

main {
  background: #ddd;
}

.toggle {
  background: #111;
  width: 40px;
  height: 40px;
  display: block;
  position: relative;
}

.toggle i,
.toggle i::after,
.toggle i::before {
  position: absolute;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  transition: transform .15s;
  background-color: #fff;
}

.toggle i {
  top: 46%;
  left: 18%;
  display: block;
  opacity: .5;
}

.toggle i::before {
  top: -10px;
}

.toggle i::after {
  bottom: -10px;
}

.toggle i::after,
.toggle i::before {
  content: '';
  display: block;
}

.toggle i::before {
  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

.toggle i::after {
  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

.no-aside .toggle i::before,
.no-aside .toggle i::after {
  transform: none;
}

<aside>
  <a class="toggle">
    <i></i>
  </a>
</aside>

<main>
  content
</main>

但似乎 grid* 属性的转换尚未在浏览器中实现，因此它不适用于网格布局。

有没有办法通过其他属性来实现这一点，但仍然保持网格布局？我尝试过的所有内容，包括宽度、左侧、边距等，似乎在 2 个网格项之间留下了空隙。

Answer 1

Grid 应该有 5 个动画属性： grid-gap、grid-row-gap、grid-column-gap、grid-template-columns 和 grid-template-rows。

但正如你所说，浏览器还没有实现它。 Firefox 和 Edge 可以为 grid-gap、grid-row-gap 和 grid-column-gap 设置动画，但不能为 grid-template-columns 或 grid-template-rows 设置动画。 Chromium 浏览器根本无法为任何网格属性设置动画。

这种特殊情况的解决方法是将过渡设置为宽度，并将模板列声明为min-content 1fr。

document.querySelector('.toggle').addEventListener('click', e =>
  document.body.classList.toggle('no-aside')
)

body {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: min-content 1fr;

  /*
  alternatively, ridiculously uneven FR columns can work too, such as
  grid-template-columns: 1fr 30fr;
  */
  grid-template-areas: "aside main";
  margin: 0;
  width: 100vw;
  height: 100vh;
}

body.no-aside aside{
  width:50px;
}

aside {
  width:200px;
  background: #111;
  color: #fff;
  transition: width 1s;
}

main {
  background: #ddd;
}

.toggle {
  background: #111;
  width: 40px;
  height: 40px;
  display: block;
  position: relative;
}

.toggle i,
.toggle i::after,
.toggle i::before {
  position: absolute;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  transition: transform .15s;
  background-color: #fff;
}

.toggle i {
  top: 46%;
  left: 18%;
  display: block;
  opacity: .5;
}

.toggle i::before {
  top: -10px;
}

.toggle i::after {
  bottom: -10px;
}

.toggle i::after,
.toggle i::before {
  content: '';
  display: block;
}

.toggle i::before {
  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

.toggle i::after {
  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

.no-aside .toggle i::before,
.no-aside .toggle i::after {
  transform: none;
}

<aside>
  <a class="toggle">
    <i></i>
  </a>
</aside>
<main>
123123
</main>