对砖砌网格布局的高度和宽度进行动画处理。 CSS网格替代方案？

时间：2018-06-23 15:13:54

标签： javascript html css css-grid

我正在构建一种“砌体”式布局，其中所有盒子的高度和宽度基本相同，但是我想通过增加其宽度和高度来突出显示一些盒子。

(like this!)

我想定期更改哪些框突出显示（某些框可能会缩小到原始大小，而其他框可能会增大）。

我已经使用CSS网格构建了以上布局，并通过使用JavaScript切换了top和highlighted类，可以实现我想要的：

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: repeat(auto-fill, 5.5%);
  grid-auto-rows: auto;
  grid-auto-flow: dense;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
}

.container .box {
  border: 1px solid black;

  overflow: hidden;
  display: grid;
  grid-template-columns: 1;
  grid-template-rows: 1;
}

.container .box.top {
  grid-row: span 2;
  grid-column: span 2;
}

.container .box.highlighted {
  grid-row: span 3;
  grid-column: span 4;
}
<div class="container">
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box highlighted"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box top"></div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
    <div class="box">-</div>
</div>

我想在切换top或highlighted类时为过渡设置动画，但是我不知道该怎么做？

使用CSS网格是否有可能（从网上可以找到我认为不是的东西）？

如果没有，我可以使用其他技术来实现这种布局/效果吗？

注意：这不需要跨浏览器（仅适用于Google Chrome），并且我可以使用JavaScript进行帮助-不需要使用纯CSS

1 个答案:

答案 0 :(得分：0)

对于有兴趣的人，我设法使用enter link description here为当前布局制作动画。

相关问题
最新问题