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

Question

首先，是我吗？

http://jsfiddle.net/8kc0onqr/

我让动画很好很长，所以可以区分，但在我的浏览器上 - Chromium Version 45.0.2454.101 Ubuntu 14.04（64位） - “结束”动画延迟了{{{ 1}}属性。

我尝试了各种缓动功能，但它们都表现出相同的行为，即暂时没有任何反应，然后动画的完成速度比预期的要快。

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

transition-duration

Answer 1

这是一个有趣的案例。但是剥离它会发现max-height是罪魁祸首。

选中复选框后，窗格将显示max-height: 10000px。现在取消选中该复选框后，max-height 逐渐动画为0。这意味着，9999px，然后9998px，...

直到你看到缩小max-height的视觉效果，它会持续一点。