轻松过渡似乎对延迟不起作用答案

【问题标题】：Easing transition doesn't seem to work on delay轻松过渡似乎对延迟不起作用
【发布时间】：2014-01-29 12:32:27
【问题描述】：

我有一个固定高度和宽度的 div，单击标签（复选框技巧）后，我将 div 扩展为 100% 的宽度和高度。这行得通，但问题在于过渡。

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

tl;dr: 过渡失去平滑度

示例：jsFiddle

【问题讨论】：

200 毫秒不是缓解任何事情的时间。
@Paulie_D 增加时间不会改变任何事情。过渡仍然不流动，只是立即改变状态。

标签： html css

【解决方案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;
}

我还以一种可以在使用多个属性时为您节省一些输入的方式编写过渡；请注意，我只能写轻松一次

fiddle

【讨论】：

成功了，感谢您的帮助。我会考虑使用 js，但现在这会做得很好。

【解决方案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;

【讨论】：

谢谢。它会随着宽度流动，但高度仍然会上升。是百分比的问题吗？
我在 localhost 上运行它，它运行良好，但是在 jsfiddle 中它的行为很奇怪......顺便说一句，您是否考虑让我们使用 javascript 或 jQuery 来进行转换？
我对 js 开放，对 jquery 没有那么多。如果我不经常使用它，我真的不想给网站带来 80KB 的负担。虽然我不确定如何让它在 js 中工作。