Javascript 在使用css转换问题之前，使用jquery定义css属性

我发现当css转换属性最初设置为“自动”时，使用它们似乎有问题。为了避免这种情况，在添加css转换属性之前，我使用jquery设置了初始css属性

我遇到的问题是，当我在设置初始css属性之后立即定义过渡属性时，我会出现奇怪的行为示例：

然而，当我延迟几毫秒设置过渡属性时，我得到了预期的行为，但代码看起来更难看示例：

有没有一种方法可以在不将css转换和目标参数放入setTimeout块的情况下实现第二个示例中的行为

谢谢你的帮助

是一个答案

$('a:first').click(function(){
    $(this).css({'width': $(this).width() / $(this).parent().width() * 100 + '%', 'height': $(this).height()});
    $('a:first').show().css({
        '-webkit-transition': 'all 3s', 
        '-moz-transition': 'all 3s', 
        width: '100%', 
        height: '100px', 
        backgroundColor: 'black'
    });
});

以下是您可以将

.css（'left'）

添加到css声明的末尾：

这样做有效（或无效）的原因是浏览器的javascript引擎优化了更改DOM的代码。因此，它不会在每行代码之后立即更新DOM，基本上是将所有代码放在一个DOM更新中

---

添加

.css（'left'）

会强制浏览器的javascript引擎查看DOM，然后提前更新DOM。

+1个很好的示例…非常想知道答案…@Tuck您是否尝试过$（'a:first'）.show（）.css（？Ya

.show（）

有效@AlexBall@Tuck，太好了，瓦西姆已经发布了答案；-）太棒了！这很有效。你能解释一下为什么它有效吗？我真的不明白背后的理论。