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>

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

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

Answer 1

网格应该有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。 Chrome（或所有关于此问题的webkit）根本无法为任何网格属性设置动画。

此特定情况的解决方法是将转换设置为旁边的宽度，并将模板列声明为可笑的不均匀FR。

＆＃13;

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

＆＃13;

body {
  display: grid;
  grid-gap: 10px;
  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;
}

＆＃13;

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

＆＃13;

但那本质上的hacky并且我会认为非常脆弱......也许应该只使用flexbox。

替代网格布局转换

1 个答案: