CSS3 Transition : Animate child to 100% width, parent 瞬间跳到100%宽度

Question

我正在尝试创建一个删除按钮，单击它后会展开以显示删除选项，因此您不会误删任何内容。问题是父容器会立即跳到完整大小，而我希望它逐渐增长。

当我为父容器设置固定像素宽度时，这可以克服，但问题是我并不总是知道内容的宽度。因此，我使用百分比来使其动态化。

我真的不知道如何解释清楚所以我做了一个 fiddle 给你看:http://jsfiddle.net/cgHcP/

HTML:

<div class="right">
    <div style="background-color: #000; display: inline-block;">
        <div class="roll-button">
            <div class="icon">x</div>
            <div class="text">Remove</div>
        </div>
    </div>
    <div style="background-color: #000; display: inline-block;">
        <div class="roll-button">
            <div class="icon">x</div>
            <div class="text">Remove</div>
        </div>
    </div>
</div>

CSS:

/* Roll Button */
div.roll-button {
    float: right;
    display: inline;
    position: relative;
    height: 24px;
    width: 24px;
    -webkit-box-shadow: 0 0 0 2px #fff;
    -webkit-border-radius: 12px;
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
    overflow: hidden;
    -webkit-transition: width .5s ease-in-out;
    transition: width .5s ease-in-out;
}

div.roll-button .icon {
    left: 0;
    display: inline;
    position: absolute;
    font-size: 24px;
    width: 24px;
    height: 24px;
    background-color: #ff3e3e;
    -webkit-border-radius: 12px;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    line-height: .7;
}

div.roll-button .text {
    float: left;
    display: inline;
    position: relative;
    height: 24px;
    overflow: hidden;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    vertical-align: middle;
    line-height: 24px;
    color: #ff3e3e;
    font-weight: 700;
    padding: 0 0 0 24px;
    font-size: 12px;
}

div.roll-button:hover .text {
    padding: 0 5px 0 29px;
}

div.roll-button:hover .icon {
    -webkit-transform: rotateZ(-180deg);
}

div.roll-button:hover {
    width: 100%;
}

.right {
    float: right;
    margin-right: 200px;
}

当您查看 fiddle 时，您会注意到父容器(黑色)在悬停时跳转到全尺寸。尽管 child 似乎在逐渐长大。当您将多个元素内联时(例如在 fiddle 中，这正是我想要做的)，这种行为会导致麻烦。

我正在尝试纯粹使用 CSS 制作此按钮，但这是我遇到的困难。有没有人建议如何使用纯 CSS 来完成此操作？

Answer 1

实现你想要的技巧是在 .text 上使用 width:auto 并限制它的 max-width。 new working jsFiddle

div.roll-button .text {
    width: auto;
    max-width:0px;
}

div.roll-button:hover .text {
    max-width:100px; /* set this to the maximum allowed value.. */
}