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

Question

我的DIV具有固定的高度和宽度，单击标签（复选框技巧）时，我将DIV扩展到100％宽度和高度。这有效，但是问题在于过渡。

我希望创建一个宽松的过渡，首先宽度扩大，然后高度扩大。但是，在定义过渡后，宽松并没有发生，相反，就像过渡时机函数转到step-end一样。过渡会立即发生，而无需放松（即使高度转换的延迟有效）。

tl; dr：过渡失去平滑度

示例：jsfiddle

Answer 1

无法从不同的"指标"过渡。

在基本状态下，您在PX中指定高度；在更改状态下，您以百分比指定它。那将行不通。

您可以将其设置为某种技巧，这些技巧并不完全令人满意；其中最好的是使用Max-Height进行更改

#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;
}

我还以一种可以在使用多个属性时可以节省一些打字的方式来撰写过渡。请注意，我只能写轻松

小提琴

Answer 2

您应该用逗号分开属性，而不是在同一行中写下它们，而是尝试以下

CSS

    -webkit-transition: width 200ms ease 0s, height 200ms ease 200ms;
    -moz-transition: width 200ms ease 0s, height 200ms ease 200ms;
    -ms-transition: width 200ms ease 0s, height 200ms ease 200ms;
    -o-transition: width 200ms ease 0s, height 200ms ease 200ms; 
     transition: width 200ms ease 0s, height 200ms ease 200ms;