demo

Question

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

例如，我的容器如下所示，包含8行元素：

= = = = =
A B C D
E F G H
= = = = =

现在我选择G，其他一切都隐藏起来，G移动到左上角：

= = = = =
摹
= = = = =

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

我也看了翻译（x，y），但它也不好，因为我不想计算将盒子移到左上角所需的像素数。如果我可以使用（position：absolute; left：0; top：0）以某种方式自动位于左上角，这将是理想的，但是一旦我将位置设置为绝对，元素就会立即跳转。 / p>

任何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>

由于你使用的是inline-block，我希望你的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设置为负值，使其能够很好地适应容器内部。

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

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

1 个答案:

demo