为什么在使用CSS3转换时会出现延迟

Question

首先，只有我吗？

http://jsfiddle.net/8kc0onqr/

我已经把动画制作得又长又好看，所以它们可以区分开来，但在我的浏览器上——Chromium Version 45.0.2454.101 Ubuntu 14.04（64位）——"关闭"动画会延迟transition-duration属性的一部分。

我尝试过各种放松功能，但它们都表现出相同的行为，即在一段时间内什么都不发生，然后动画的完成速度比预期的要快。

jsfiddle的代码在下面重复，最初是从atzcss.com 无耻地窃取的

<div class="group">
    <input type="checkbox" 
        class="showhide" 
        id="showhide"
    />
    <label for="showhide">
        show/hide
    </label>

    <div class="subpane">
        <pre>
        lots
        of
        stuff
        so
        the
        pane
        is
        nice
        and
        tall
        for
        demonstration
        purposes
        </pre>
    </div>
</div>
.group {
    border: 1px solid #aaa;
}
.group label {
    font-size: 150%;
    font-weight: bold;
    width: initial;
    display: block;
    background-color: #F4EDFF;
    text-transform: capitalize;
}
.group input {
    display: none;
}
.group input ~ label:after {
    font-family: FontAwesome;
    /* fa-angle-double-down */
    content: "f103";
}
.group input:checked ~ label:after {
    font-family: FontAwesome;
    /* fa-angle-double-up */
    content: "f102";
}

.group input ~ .subpane {
    max-height: 0;
    overflow: hidden;
    transition: max-height 5s ease-out;
    transition-delay: 0;
}
.group input:checked ~ .subpane {
    max-height: 10000px;
    transition: max-height 3s ease-in;
    transition-delay: 0;
}

Answer 1

这是一个有趣的案例。但把它拆开，你会发现max-height是罪魁祸首。

选中复选框后，窗格将显示max-height: 10000px。现在取消选中该复选框时，max-height将逐渐设置为0的动画。也就是说，9999px，然后是9998px。。。

在你看到缩小的max-height的视觉效果之前，它会持续一段时间。