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

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

概念示例：

在下面的代码片段中，框的高度为 600 像素，最大高度为 1000 像素。为了让动画将最大高度更改为 200 像素，它必须经过 400 像素的空白 space 才能看到变化。这就是导致 'delay'.

的原因

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>

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

Why is my CSS3 transition delaying before it starts?

css

css-transitions