css - 为什么我的 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 秒。

我一直在关注 the transition guide here .

我该怎么做才能在我点击按钮的那一刻开始过渡，然后持续 5 秒？

Answer 1

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

概念示例:

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

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>