Question

我有一个固定高度和宽度的div，点击标签后（复选框技巧）我将div扩展为100％宽度和高度。这是有效的，但问题在于转型。

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

tl; dr：过渡失去顺畅

Answer 1

您应该使用逗号分隔属性，而不是将它们写在同一行中，请尝试使用

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;

Answer 2

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

在基本状态下，您以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;
}

我还以一种在使用多个属性时可以节省一些打字的方式来编写转换;请注意，我只能写一次

fiddle

缓和过渡似乎不适用于延迟

2 个答案: