Question

我有以下html结构

<div class=outer> <div class=inner></div> <div>

.inner的宽度是自动的，并根据我使用JQuery放入的文本进行更改。当.inner内的文本内容发生变化时，我希望.outer或.inner的宽度能够平滑地改变。我写了以下CSS代码

.outer {
    transition: all 0.5s linear;
    position: absolute;
    top: 50%;
    left: 50%;
}

.inner {
        transition: all 0.5s linear; // just to be sure
        background-color: white;
        color: @body;
        display: block;
        padding: 18px 28px;
        position: relative;
        width: 100%;
}

现在的行为是宽度立即变化，没有丝毫过渡。我希望宽度平滑变化。转换是通过LESS添加的，所以我可以使用前缀。

Answer 1

CSS转换不适用于auto之类的值，因为它除了使用默认行为或重置某些内容之外没有任何意义，但百分比可以设置为动画。

我创建了一个动画加载器，仅使用CSS和内部元素的百分比宽度，但是我的元素具有固定的尺寸，因为它知道最小宽度百分比和最大宽度百分比，因此可以计算这两个值。

从100％动画到自动需要更多的努力，如果您在操作元素后不知道尺寸（例如它自动缩小），您必须创建一个带有显示的不可见元素您可以找到它的宽度，然后再将其删除。

您可以使用auto获取最大宽度，并使用最小百分比值来转换为100%，而不是Position Name Symbol Price MarketCap Change7d 1 Bitcoin dogecoin btc 243.967 3490594447.55 -2.96 2 Ripple dogecoin xrp 0.0107266 342270269.453 13.28 3 Litecoin dogecoin ltc 2.9611 118992556.35 -0.05 4 Dogecoin dogecoin doge 0.000190396 19018726.9507 -5.09值。

设置为auto时，块元素的宽度未转换

1 个答案: