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

您看到的延迟可能是通过不会导致视觉更改的值设置动画所需的时间。根据差异，它可能会导致视觉动画的显着延迟。这就是进行转换时经常避免最大/最小宽度/高度的原因。

概念示例：

在下面的代码段中，该框的高度为600px，最大高度为1000px。为了让动画将max-height更改为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>

为什么我的CSS3过渡在它开始之前会延迟？

1 个答案: