Flexbox 网格布局 - 动画项目宽度

Question

我正在尝试使用一些项目（图块）构建一个网格，以显示有关团队成员的信息。

布局有 3 列和无限数量的行。

假设：

• 一开始，每个图块的宽度为 33.3%（3 列布局）。
• 当我们点击一​​个磁贴标题时，可点击项将占据其所在行的 2 列（66.6% 宽度）
• 可点击项从未进入下一行（无换行），第 1 列和第 2 列的元素应具有从左到右平滑的动画宽度。
• 如果是第 3 列的元素，则动画宽度应从右边缘向左增加，前一个元素（从第 2 列开始）应移到下一行的开头
• 项目宽度应该是动画的

(1) 默认网格示例（有 9 个闭合图块）：

1 2 3
4 5 6
7 8 9

(2) 打开第 4 个图块的网格（占用第 1 列和第 2 列；移动下一个元素）：

1 2 3
4 4 5
6 7 8 
9

(3) 打开第 5 个图块的网格（占用第 2 列和第 3 列；将下一个元素移动到新行）：

1 2 3
4 5 5
6 7 8
9

(4) 打开第 6 个图块的网格（获取第 3 列和第 2 列（从右到左合并）；将元素从第 2 列移动到下一行的开头并移动元素）：

1 2 3
4 6 6
5 7 8
9

问题：

• 实现描述效果 display: flex 或 display: grid 的更好的 CSS 方法是什么？
• 如何实现动画平滑效果（还有当我们需要将元素包裹到下一行时）？
• 如何为第 3 列的打开图块创建效果（示例 (4) 动画从右到左）并将前一个元素移动到下一行？

我当前的代码：

$(document).on('click', 'h2', function(e) {
  $(this).parent().parent().siblings().removeClass('active').end().toggleClass('active');
});

.grid {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  width: 100%;
  margin: -15px;
}

.grid__item {
  position: relative;
  width: 100%;
  min-height: 1px;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
  transition: all .4s ease-in-out;
  padding: 15px;
  box-sizing: border-box;
}

.grid__item.active {
  flex: 0 0 66.66666%;
  max-width: 66.66666%;
}

.grid__item-inner {
  background: #9c9b9b;
  height: 50px;
}

h2 {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">
  <div class="grid__item">
    <div class="grid__item-inner">
      <h2>Name 1</h2>
    </div>
  </div>
  <div class="grid__item">
    <div class="grid__item-inner">
      <h2>Name 2</h2>
    </div>
  </div>
  <div class="grid__item">
    <div class="grid__item-inner">
      <h2>Name 3</h2>
    </div>
  </div>
  <div class="grid__item">
    <div class="grid__item-inner">
      <h2>Name 4</h2>
    </div>
  </div>
  <div class="grid__item">
    <div class="grid__item-inner">
      <h2>Name 5</h2>
    </div>
  </div>
  <div class="grid__item">
    <div class="grid__item-inner">
      <h2>Name 6</h2>
    </div>
  </div>
  <div class="grid__item">
    <div class="grid__item-inner">
      <h2>Name 7</h2>
    </div>
  </div>
  <div class="grid__item">
    <div class="grid__item-inner">
      <h2>Name 8</h2>
    </div>
  </div>

  <div class="grid__item">
    <div class="grid__item-inner">
      <h2>Name 9</h2>
    </div>
  </div>
</div>

Answer 1

您将无法仅使用 CSS 实现此目的。 animate-css-grid npm package 可以复制您正在寻找的动画。