当设置为自动时，块元素的宽度不过渡

Question

我有以下html结构

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

.inner 的宽度是自动的，并且会根据我使用 JQuery 放入其中的文本而变化。我希望 .outer 或 .inner 的宽度在 .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% 到自动的动画需要更多的努力，如果您在操作元素后不知道尺寸（例如它会自动缩小），您必须创建一个带有显示的不可见元素，这样你可以找出它有多宽然后再次删除它。

您可以使用 100% 作为最大宽度和过渡到的最小百分比值，而不是 auto 值。

当设置为自动时，块元素的宽度不过渡

when set to auto, width of a block element not transitioning

jquery

html

css

width

transition