为什么在使用 CSS3 过渡时会出现延迟？

Question

首先，只有我一个人吗？

http://jsfiddle.net/8kc0onqr/

我已经将动画制作得又好又长，以便能够区分它们，但在我的浏览器上 - Chromium 版本 45.0.2454.101 Ubuntu 14.04（64 位） - “关闭”动画延迟了 @987654322 的一部分@属性。

我尝试了各种缓动函数，但它们都表现出相同的行为，即一段时间内什么都没有发生，然后动画完成的速度比预期的要快。

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 的视觉效果，它会持续一段时间。