html - 缓和过渡似乎对延迟不起作用

Question

我有一个具有固定高度和宽度的 div，在单击标签(复选框技巧)后，我将 div 扩展到 100% 的宽度和高度。那行得通，但是问题正在过渡中。

我希望创建一个缓动过渡，首先宽度扩大，然后高度扩大。然而，在定义转换后，缓动不会发生，相反，它就像转换计时函数转到 step-end。过渡立即发生而不缓和(即使高度转换的延迟有效)。

tl;dr:过渡失去平滑度

示例:jsFiddle

Answer 1

不能从不同的“指标”转换属性。

在基本状态下，您以像素为单位指定高度；在改变的状态下，您以百分比指定它。那是行不通的。

您可以通过一些技巧将其设置为以某种方式工作，但这些技巧并不完全令人满意；其中最好的是使用最大高度来进行更改

#cbox {
    display:none;
}

.someDiv {
    background: blue;
    color: white;
    width: 200px;
    max-height: 100px;
    overflow: hidden;
    height: 100%;

    transition-property: width, max-height;
    transition-duration: 2000ms;
    transition-timing-function: ease;
    transition-delay: 0, 2000ms;
}

#cbox:checked + div {
    width: 100%;
    max-height: 1000px;
}

我还以一种可以在使用多个属性时节省您一些输入的方式编写了转换；请注意，我只能写 ease 一次

fiddle