5

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

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

= = = = =
ABCD
EFGH
= = = = =

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

= = = = =
G
= = = = =

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

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

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

4

1 回答 1

4

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

这是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 设置为负值，以使其能够很好地适应容器。

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

演示

于 2013-06-06T17:34:11.710 回答