使用网格区域的 CSS 网格动画

Question

我正在使用 CSS 网格构建拼图。

我已将拼图简化为一个红色方 block 和一个空白方 block 。

我想做的是，如果您单击红色方 block ，红色方 block 将滑到空白方 block 位置。

目前，我可以使用一个简单的 javascript 单击处理程序来切换它们的位置，该处理程序将类“左”和“右”切换到两个平铺 div。然后，在我的 CSS 中，我为 css 类 .left 或 .right 指定了网格区域(左和右)。

解释起来有点困难，所以我在下面包含了所有代码。

基本上，我希望找到某种方法将红色瓷砖从grid-area: left 滑动到grid-area: right。

任何帮助将不胜感激!!

const red = document.querySelector('.red');
const blank = document.querySelector('.blank');
red.addEventListener('click', slide);

function slide() {
  red.classList.toggle('left');
  red.classList.toggle('right');
  blank.classList.toggle('left');
  blank.classList.toggle('right');
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "left right";
  border: 10px solid black;
  text-align: center;
}

.red {
  background: red;
}

.left {
  grid-area: left;
}

.right {
  grid-area: right;
}

<div class="container">
  <div class="red left">
    <p>RED</p>
  </div>
  <div class="blank right"></div>
</div>

Answer 1

经过一番挖掘，我找到了解决问题的方法。我想我可以在这里分享它，以防其他人处于同样的困境。您可以在此处找到“CSS 网格的简单过渡”库

https://github.com/aholachek/animate-css-grid

我还找到了一个 codepen 示例，它演示了我使用这个库寻找的确切行为:

https://codepen.io/daviddarnes/pen/EOqZdw

我遇到的唯一小问题是白色“空白”瓷砖在彩色瓷砖上滑动。我只是将 z-index: 1 添加到我的彩色图 block ，将 z-index: 0 添加到我的样式表中的空白图 block ，瞧。就像一个魅力!

注意:图书馆和 codepen 程序都不是我自己的作品，我只是与大家分享这些资源，希望能帮助到一些人!