CSS3过渡:将孩子动画为100%宽度,父母立即跳到100%宽度

Question

我正在尝试创建一个删除按钮,一旦您单击它,展开以显示删除选项,因此您不会错误地删除任何内容.问题是父容器立即跳到全尺寸,而我希望它逐渐增长.

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

我真的不知道如何解释它,所以我已经做了一个小提示给你看: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;
}

当你看到小提琴时,你会注意到父容器(黑色),当悬停时跳到全尺寸.即使孩子似乎逐渐成长.当你将多个项目内联时(例如在小提琴中,以及我想要做的事情),这种行为会带来麻烦.

我试图用CSS制作这个按钮,但这就是我被卡住的地方.有没有人建议如何使用纯CSS来完成这项工作？

Answer 1

诀窍实现你想要使用什么样width:auto的.text,并限制了max-width它..在新工作的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.. */
}