可以为网格区域属性设置动画吗？

Question

我有一个用于2个按钮的overlay元素，并且我试图通过更改元素的grid-area属性以使其与已单击的按钮相匹配来实现某种活动状态。

我想知道是否可以对此更改进行动画处理并具有某种幻灯片动画。

const overlay = document.querySelector('.overlay');
const hello = document.querySelector('.btn-1');
const world = document.querySelector('.btn-2');

hello.addEventListener('click', e => {
  overlay.style.gridArea = '1 / 1 / -1 / 2';
});

world.addEventListener('click', e => {
  overlay.style.gridArea = '1 / 2 / -1 / -1';
});

.grid {
  width: 1000px;
  display: grid;
  grid-template: 1fr / repeat(2, min-content);
}

.overlay {
  background-color: cornflowerblue;
  width: 100%;
  height: 100%;
  grid-area: 1 / 1 / -1 / 2;
}

.btn {
  text-align: center;
  width: 100px;
  font-size: 30px;
  font-family: sans-serif;
  padding: 20px 40px;
  cursor: pointer;
}

.btn-1 {
  grid-area: 1 / 1 / -1 / 2;
}

.btn-2 {
  grid-area: 1 / 2 / 2 / -1;
}

<div class="grid">
  <div class="overlay"></div>
  <span class="btn btn-1">Hello</span>
  <span class="btn btn-2">World</span>
</div>

Answer 1

好吧，我发现了一个很好的库，可以很容易地做到这一点。由于某种原因，我无法在片段中包含CDN链接，但该项目在github上名为animate-css-grid。

const overlay = document.querySelector('.overlay');
const hello = document.querySelector('.btn-1');
const world = document.querySelector('.btn-2');
const grid = document.querySelector('.grid');

animateCSSGrid.wrapGrid(grid, {duration : 600});
hello.addEventListener('click', e => {
  if (overlay.classList.contains('overlay--2')) {
    overlay.classList.remove('overlay--2');
  }
});

world.addEventListener('click', e => {
  if (!overlay.classList.contains('overlay--2')) {
    overlay.classList.add('overlay--2');
  }
});

.grid {
  width: 1000px;
  margin: 100px auto;
  display: grid;
  grid-template: 1fr / repeat(2, min-content);
}

.overlay {
  background-color: cornflowerblue;
  width: 100%;
  height: 100%;
  grid-area: 1 / 1 / -1 / 2;
  z-index: -1;
}

.overlay--2 {
  grid-area: 1 / 2 / -1 / -1;
}

.btn {
  text-align: center;
  width: 100px;
  font-size: 30px;
  font-family: sans-serif;
  padding: 20px 40px;
  cursor: pointer;
}

.btn-1 {
  grid-area: 1 / 1 / -1 / 2;
}

.btn-2 {
  grid-area: 1 / 2 / 2 / -1;
}

<div class="grid">
  <div class="overlay"></div>
  <span class="btn btn-1">Hello</span>
  <span class="btn btn-2">World</span>
</div>