Question

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

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

通过使元素绝对定位并为下一个元素提供边距以使其不移动，可以轻松实现该部分...

但是，我不能为我的生活弄清楚如何使用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/

帮助我Obi-Wan Kenobi，你是我唯一的希望。

回答后编辑：感谢下面的val，您可以在此处查看其正常运行的演示：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;
}

demo

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

Answer 2

试试这个：

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

DEMO

#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;
}

如何显示正在扩展到附近内容的元素的转换？

2 个答案: