Question

这是我的HTML：

<section>
    <a href="http://exanple.com">
        <header>
            <span>
                Title
            </span>
        </header>
    </a>
    ...
</section>

这是我的CSS：

section header span
{
    display: inline-block;
    background-color: rgba(100, 149, 237, 0.72);

    padding: 0;
    margin: 0;
    line-height: 55px;
    padding-left: 20px;
    padding-right: 20px;

    -o-transition:.5s ease-out;
    -ms-transition:.5s ease-out;
    -moz-transition:.5s ease-out;
    -webkit-transition:.5s ease-out;
    transition:.5s ease-out;
}
section header:hover span
{
    width: 100%;
    padding-left: 25px;
    color: rgb(255, 223, 223);
}

padding-left和color属性转换没有问题，但是，如果我在CSS中设置初始宽度，宽度将只有动画。现在宽度将跳跃到100％，而其他两个属性动画。

但是，因为标题将包含可变长度的文本，所以我不想设置特定的初始宽度。

有没有解决这个问题的方法？

Answer 1

在悬停

上使用min-width代替width

section header:hover span
{
    min-width: 100%;
    padding-left: 25px;
    color: rgb(255, 223, 223);
}

Demo

这与仅使用width相反，因为浏览器并不知道width:auto有多大。使用min-width忽略当前有多大，只影响它大于指定值的要求

Answer 2

好吧，也许你可以在第一个元素的宽度中使用百分比。还使用ease-in-out效果来设置宽度的动画

section header span
{
    display: inline-block;
    background-color: rgba(100, 149, 237, 0.72);

    padding: 0;
    margin: 0;
    line-height: 55px;
    padding-left: 20px;
    padding-right: 20px;
    width: 10%;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
section header:hover span
{
    width: 100%;
    padding-left: 25px;
    color: rgb(255, 223, 223);
}

有一个jsFiddle

无法为元素的宽度设置动画

2 个答案: