Javascript CSS转换在jQuery.load回调上失败

我有一个函数，它使用jQuery将html加载到一个表中，然后使用回调将一个类添加到其中一行中。该函数由页面上的各种UI驱动事件触发。我还有一个css转换规则，因此颜色应该淡入（

转换：背景色1000ms线性

）。函数如下所示：

function load_tbody(row_id) {
    $('tbody').load("load_tbody.php", function() {
        requestAnimationFrame(function() {
            $(row_id).addClass('green');
        });
    });
}

功能加载体（行id）{
$（'tbody'）.load（“load_tbody.php”，function（））{
$（row_id）.addClass（'green'）；
});
}

加载html后，将成功添加类，并将行颜色设置为绿色。然而，我的css转换规则似乎被忽略了

当我添加一个轻微的延迟，即使是10毫秒，也可以正常工作：

功能加载体（行id）{
$（'tbody'）.load（“load_tbody.php”，function（））{
setTimeout（函数（）{
$（row_id）.addClass（'green'）；
}, 10);
});
}

国家：

如果提供了“完整”回调，则在 已执行后处理和HTML插入

对我来说，这意味着新元素已经加载到dom中并应用了现有样式，可以进行操作。为什么转换在第一个示例中失败，但在第二个示例中成功

下面是一个功能完整的示例页面，用于演示所讨论的行为：

虽然上面的示例从cdn链接了jQuery版本2.2.3，但实际的页面使用的是版本1.7.1。在两个版本中都可以观察到相同的行为

更新：

在考虑了下面提供的一些评论和答案后，我偶然发现了一些更令人困惑的东西。User@gdyrrahitis提出了一个建议，让我这样做：

function tbody_fade(row_id) {
    $('tbody').load("load_tbody.php", function() {
        $('tbody').fadeIn(0, function() {
          $(this).find(row_id).addClass('green');
        });
    });
}

在

fadeIn（）

回调函数中添加类可以工作，即使持续时间为0毫秒。所以我想知道。。。如果元素理论上是存在的，那么在我添加该类之前，浏览器认为它的背景色是什么。因此，我将背景颜色记录在日志中：

console.log($(row_id).css('background-color'));

你知道吗？只需获得背景色即可使一切正常：

function tbody_get_style(row_id) {
    $('tbody').load("load_tbody.php", function() {
        $(row_id).css('background-color');
        $(row_id).addClass('green');
    });
}

只需添加行

$（row_id）.css（'background-color'）似乎什么都不做，这会导致转换效果起作用。下面是一个演示：


我被这件事弄得目瞪口呆。为什么这样做有效？这仅仅是增加了一点延迟，还是jQuery获取css属性对新添加元素的状态有很大的影响？
这是由浏览器引起的常见问题。基本上，插入新元素时不会立即插入。因此，当您添加类时，它仍然不在DOM中，并且在添加类后将计算如何呈现它。当元素被添加到DOM中时，它已经有了绿色的背景，它从来没有白色的背景，因此不需要进行转换。正如建议和建议的那样，存在克服这一问题的变通方法。我建议您像这样使用
requestAnimationFrame
：

function load_tbody(row_id) {
    $('tbody').load("load_tbody.php", function() {
        requestAnimationFrame(function() {
            $(row_id).addClass('green');
        });
    });
}

编辑：

似乎上述解决方案并不适用于所有情况。我发现了一个有趣的技巧，当一个元素被真正解析并添加到DOM中时，它会触发一个事件。如果在真正添加元素后更改背景色，则不会出现问题

编辑：如果您想尝试此解决方案（在IE9下不起作用）：

包括以下CSS：

@keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}

@-moz-keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

@-webkit-keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

@-ms-keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    } 
}

@-o-keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
} 

.nodeInsertedTarget {
    animation-duration: 0.01s;
    -o-animation-duration: 0.01s;
    -ms-animation-duration: 0.01s;
    -moz-animation-duration: 0.01s;
    -webkit-animation-duration: 0.01s;
    animation-name: nodeInserted;
    -o-animation-name: nodeInserted;
    -ms-animation-name: nodeInserted;        
    -moz-animation-name: nodeInserted;
    -webkit-animation-name: nodeInserted;
}

并使用以下javascript：

nodeInsertedEvent= function(event){
        event = event||window.event;
        if (event.animationName == 'nodeInserted'){
            var target = $(event.target);
            target.addClass("green");
        }
    }

document.addEventListener('animationstart', nodeInsertedEvent, false);
document.addEventListener('MSAnimationStart', nodeInsertedEvent, false);
document.addEventListener('webkitAnimationStart', nodeInsertedEvent, false);

function load_tbody(row_id) {
    $('tbody').load("load_tbody.php", function() {
        $(row_id).addClass('nodeInsertedTarget');
    });
}

可以制作成通用解决方案或库。这只是一个快速的解决方案。
jQuery
load
旨在将请求的所有内容都放到页面中

您可以通过使用
$来利用jQuery
延迟的
对象的功能。改为get

看看这个

来自plunk的代码片段

我使用的是
$。当
解析了
$.get
后，它将运行回调，这意味着将获取HTML响应。获取响应后，将其附加到
tbody
，该实体是fadedIn（
fadeIn
方法），显示后，将
.green
类添加到所需行

请注意，如果您只是将html和类附加到
行id
，您将无法看到转换，因为它会立即执行。使用
fadeIn
的一个很好的视觉技巧可以完成这项工作

更新

在DOM中新添加的元素上，不会触发CSS3
transition
。这主要是因为控制所有动画的内部浏览器引擎。关于这个问题，有很多文章都有解决办法，也有很多答案。在那里可以找到更多的资源，我相信这些资源比我能更好地解释这个主题

这个答案是关于后退一步并更改在DOM中呈现动态元素的功能，而不使用
setTimeout
或
requestAnimationFrame
。这只是以清晰一致的方式实现您想要实现的另一种方式，因为jQuery可以跨浏览器工作。
fadeIn（100，…
是浏览器将要渲染的下一个可用帧所需要的。它可能要少得多，其价值只是为了满足视觉美学

另一个解决办法是根本不使用过渡，而是使用
动画
。但根据我的测试，这在IE Edge中失败，在Chrome和Firefox上效果很好

请参阅以下资源：




更新2

请看一下“请”，因为关于CSS3
转换的有趣内容就在这里

…对一组同时进行的样式更改的处理称为样式更改事件。（实现通常有一个样式更改事件与