为什么我的 CSS3 转换在开始之前会延迟？

Question

要么我误解了它是如何工作的，要么它根本不起作用。我有以下 CSS：

transition-property: max-width;
transition-timing-function: linear;
transition-duration: 5s;
transition-delay: 0s;

我期望的是，当我单击按钮时，转换会在 5 秒后开始并结束。

发生的情况是，在我单击按钮后，在转换开始之前延迟了大约 3.5 秒，并且转换持续了大约 1.5 秒。总而言之，5 秒。

如果我使用transition-timing-function: ease-in;它，在转换开始之前会延迟大约 4.5 秒。

我一直在遵循这里的转换指南。

我该怎么做才能让转换在我单击按钮的那一刻开始，然后持续 5 秒？

Answer 1

您看到的延迟可能是通过不会导致视觉变化的值进行动画处理所需的时间。根据差异，它可能会导致视觉动画显着延迟。这就是为什么在进行转换时经常避免最大/最小宽度/高度。

概念示例：

在下面的代码片段中，框的高度为 600 像素，最大高度为 1000 像素。为了使动画将最大高度更改为 200 像素，它必须经过 400 像素的空白空间才能看到变化。这就是导致“延迟”的原因。

document.getElementById('change').addEventListener('click', function(){
   document.getElementById('box').className = 'box short';
});

.box{
  margin:20px;
  width:200px;
  background:red;
  height:600px;
  max-height:1000px;
  transition: max-height 5s linear;
}

.box.short{
  max-height:200px;
}

<button id="change">Change Max Height</button>

<div id="box" class="box"></div>