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

Question

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

我已将难题简化为一个红色方块和一个空白方块。

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

目前，我可以使用简单的javascript单击处理程序切换其位置，该处理程序将类“ left”和“ right”切换到两个tile 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添加到彩色图块，并将z-index: 0添加到空白图块。就像魅力一样！

注意：库和codepen程序都不是我自己的工作，我只是与大家共享这些资源，希望可以帮助到别人！