CSS过渡动画与瓦片布局是否可以实现？答案

【问题标题】：CSS transition animation with tiles layout is it possible to achieve?CSS过渡动画与瓦片布局是否可以实现？
【发布时间】：2017-06-13 23:23:42
【问题描述】：

我几周来一直在尝试创建一个特定的解决方案，我已经尝试了很多事情，但我不确定是否有可能实现。我需要您的意见，并为我指明正确的方法。按照我要创建的内容：

最初有一个平铺布局，其中一定数量的卡片（比如 12 个）放置在 4x3 网格中：

现在，如果用户点击一个图块（框 3），状态将变为以下：

所选图块已展开，其他图块在右侧对齐：

挑战是我想创建一个过渡，从每个图块的初始状态到每个图块在右侧下方对齐的状态。同时，当一个图块被点击时，它会在原地展开。注意 - 位置没有突然变化，没有重新加载页面，最好没有 JS（我想写一个纯 CSS 的解决方案）。一切顺利地动画到新的位置。从第二个屏幕开始，如果选择了不同的图块（从右侧开始），则展开的项目将缩小并进入右侧堆栈，而选定的项目将展开并取代当前展开的项目 (B3)。

如果你能指出我正确的方向，那将是很大的帮助。

谢谢。

【问题讨论】：

答案是否定的。不使用 CSS。
为什么要投反对票？这与本网站无关还是问题描述性不够？
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
正如问题中所述，我已经尝试了很多不同的事情，这个问题不可能列出所有内容，因为现在的主要问题是 - 是否有可能实现？你已经说过它不是，我现在也在想，没有一定程度的 JS 是不可能实现的。
开头 B1 到 B3 的左边结尾到右边你怎么能顺利做到这一点？

标签： css css-transitions css-animations

【解决方案1】：

你应该检查 css flexbox。使用“订单”属性，您可以为每个盒子指定从 2 到 8 的顺序，并且每次选择一个框时，您将它的顺序更改为 1，并且您还更改了它的大小和颜色。

但是，我认为您不能仅对 CSS 使用“点击”操作。我建议您使用 JS 来实现您想要实现的目标。

希望对你有帮助

【讨论】：