如何使用 CSS3 过渡来启用行内块元素的对角移动？

Question

我有一个特别的问题要通过 CSS3 过渡来解决。所以我有一个包含内联块元素的容器，一旦我选择了其中一个元素，其他所有内容都将被隐藏，并且所选元素应该平滑地移动到容器的左上角。

例如，我的容器如下所示，其中包含 8 个元素，包裹在 2 行中：

= = = = =
ABCD
EFGH
= = = =

现在我选择 G，其他所有东西都被隐藏了，G 被移动到左上角：

= = = = =
G
= = = =

我目前的做法是将 G 的所有兄弟姐妹的宽度和高度设置为 0，CSS3 过渡效果完美，我可以看到 G 平滑地移动到左边缘。但是，由于 G 位于第二行，因此当第一行上的所有内容都缩小时，它会向上跳一行。这种运动是突然的和不可取的。我希望效果就像 G 对角线平滑地移动到左上角。

我还查看了 translate(x,y) ，但它也不好，因为我不想计算将框移动到左上角的像素数。如果我可以使用 (position: absolute; left: 0; top: 0) 以某种方式自动位于左上角，那将是理想的，但是一旦我将位置设置为绝对，元素就会立即跳转。

任何 CSS3 大师都可以提出一个不错的方法吗？

Answer 1

并不完美，但这是我的解决方案：

这是 HTML：

<div class="base">
<div class="container"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child2"></div><div class="child"></div>

由于您使用的是内联块，并且我希望您的 div 能够很好地折叠，因此它们之间不需要有空格。

CSS 是：

.container, .base {
    width: 500px;
    height: 400px;
}

.base {
    border: solid 1px black;
}
.container {
    -webkit-transition: 1s all linear;
}
.child, .child2 {
    width: 120px;
    height: 80px;
    display: inline-block;
    margin: 10px;
}
.child {
    -webkit-transition-duration: 1s;
    -webkit-transition-property: height, width, margin;
    -webkit-transition-timing-function: linear;
    background-color: lightblue;
}
.child2 {
    -webkit-transition: 1s all linear;
    background-color: lightgreen;
}
.base:hover .container {
    width: 20px;
}
.base:hover .child {
    width: 5px;
    height: 0px;
    margin: 0px;
    background-color: silver;
}
.base:hover .child2 {
    margin-right: -120px;
}

这个想法是在容器和子容器之间有一个额外的 div，它的大小调整速度与子容器的速度大致相同。这样，我们为所有过渡保持相同的布局，在本例中每行 3 个 div，并且避免所有元素进入同一行并折叠可见 div 的顶部。

当容器小于不收缩的div时，这种方法存在一个问题；为了避免这种情况，我们将可见元素的 margin-right 设置为负值，以使其能够很好地适合容器内。

我在最终状态下遇到问题，行之间有空格（并且元素没有到达最上面的位置）。当我在小提琴之外有相同的代码时，这个问题不会出现；我不知道是什么原因造成的。

演示