Question

我有一个div，我想让它从font-size 20px转换到font-size 40px并且还改变它的颜色。我知道我可以用maaany其他替代品做到这一点，但我想探索过渡＆＃34;过渡＆＃34;我觉得有些不对劲。

如果我这样做：

- (IBAction)press:(UIButton *)sender {
    [[NSNotificationCenter defaultCenter] postNotificationName:@"show" object:nil];
}

jQuery应首先设置＆＃34;转换＆＃34;，然后设置颜色和字体大小和浏览器应该进行转换。但情况并非如此，字体大小和颜色立即应用。

更奇怪的是，如果我先设置过渡，并在2秒后设置字体大小和颜色，那么转换将顺利进行。为什么？

检查以下示例。如果您打开链接，浏览器将立即应用颜色和字体大小，而不是平滑过渡。为什么呢？

Answer 1

之所以没有按照您期望的方式行事的原因是由于DOM中的重排工作原因。 Reflow是用于重新计算DOM中元素的位置和几何的Web浏览器过程，并且可以由许多事物触发，包括在这种情况下，调整元素的CSS属性。

当您使用多个CSS属性进行$("#xxx").css({...});调用时，您将为浏览器提供一系列要执行的布局操作，并且它将以用户阻止方式执行所有这些操作。您的样式将立即应用，因为在操作完成并呈现新DOM之前，没有transition属性。

此外，所有现代浏览器都有优化以最大限度地减少重排（同样，它是一个阻塞操作，因此会影响性能），所以如果您只是分开设置属性：

$("#xxx").css({transition:"all 1500ms ease-out 0ms"});

$("#xxx").css({color:"#00FFFF", fontSize:"40px"});

您可能希望它设置transition属性，重排，然后设置color和fontSize，触发转换并按照您的预期方式工作。但不过，这些操作将由浏览器进行批处理，所有内容都将在一次重排中完成。

这也是在设置color和fontSize之前等待一秒钟的原因。那些布局操作不再一起批处理，所以这次当你设置其他两个CSS时，你有一个transition属性。