时间戳

首页 > 解决方案 > 使用网格区域的 CSS 网格动画

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

问题描述

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

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

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

目前，我可以使用一个简单的 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>

标签： cssanimationcss-grid

解决方案

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

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

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

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

我面临的唯一小问题是白色的“空白”瓷砖滑过彩色瓷砖。我只是在样式表中添加z-index: 1了彩色瓷砖和z-index: 0空白瓷砖，瞧。奇迹般有效！

注意：图书馆和codepen程序都不是我自己的工作，我只是与大家分享这些资源，希望能帮助别人！

推荐阅读