如何显示在附近内容上展开的元素的转换

Question

好的，所以理论上这应该很容易，但它并没有像我预期的那样工作。

我有一个iline块元素的列表，当悬停在它们上面时，我希望它们扩展到附近的元素上。

这一部分很容易完成，方法是使元素绝对定位，并为下一个元素留出余量，使其不会移动。。。

然而，我一辈子都不知道如何使用transition属性使其具有动画效果。

下面是我的意思的一个例子：

HTML:

<div id="container">
    <div class="panel">
        One
    </div>
    <div class="panel">
        Two
    </div>
    <div class="panel">
        Three
    </div>
</div>
<div class="moreContentHere">
    Something something darkside.
</div>

CSS：

#container {
    padding:0;
    margin:0;
    height:100px;
    width:600px;
    overflow:hidden;
}
#container .panel {
    padding:0;
    margin:0;
    height:100px;
    width:100px;
    position:relative;
    overflow:hidden;
    display:inline-block;
    border-right:1px solid red;
    transition:width 300ms;
    -webkit-transition:width 300ms;
    transition:height 300ms;
    -webkit-transition:height 300ms;
    z-index:1;
}
#container .panel:hover {
    position:absolute;
    width:200px;
    height:200px;
    background-color:#eee;
    z-index:2;
}
#container .panel:hover + .panel {
    margin-left:100px;
}

我在这里为它创建了一个jsfiddle：http://jsfiddle.net/yzM9q/2/

帮帮我欧比-万·克诺比，你是我唯一的希望。

回答后编辑：多亏了下面的vals，你可以在这里查看它正常工作的演示：http://jsfiddle.net/yzM9q/26/

Answer 1

您不能在其中进行更改非数字属性的转换。（例如，相对于绝对位置改变位置。什么是50%绝对位置和50%相对位置？）

因此，CSS应该保持元素的相对位置。现在你正在让它们失去流动性；你不能。因此，另一种选择是给被悬停的元素一个负的右边距。

CSS

#container {
    padding:0;
    margin:0;
    height:100px;
    width:600px;
}
#container .panel {
    padding:0;
    margin:0;
    height:100px;
    width:100px;
    position:relative;
    overflow:hidden;
    display:inline-block;
    border-right:1px solid red;
    vertical-align: top;
    transition: width 3s, height 3s, margin-right 3s;
    -webkit-transition: width 3s, height 3s, margin-right 3s;
    z-index:1;
}
#container .panel:hover {
    width:200px;
    height:200px;
    background-color:#eee;
    z-index:2;
    margin-right: -100px;
}

演示

我还删除了隐藏在父对象中的溢出，只是为了使高度增加可见。

Answer 2

试试这个：

从悬停面板中删除position:absolute，并将vertical-align:top设置为您的面板。将您的转换更改为transition: all 0.3s。

演示

#container {
    padding:0;
    margin:0;
    height:100px;
    width:600px;
    overflow:hidden;
}
#container .panel {
    padding:0;
    margin:0;
    height:100px;
    width:100px;
    position:relative;
    overflow:hidden;
    display:inline-block;
    vertical-align:top;
    border-right:1px solid red;
    transition:all 0.3s;
    -moz-transition:all 0.3s;
    -o-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    z-index:1;
}
#container .panel:hover {
    width:200px;
    height:200px;
    background-color:#eee;
    z-index:2;
}
#container .panel:hover + .panel {
    margin-left:100px;
}