当文档加载未触发子元素CSS转换时的jQuery addClass

Question

我的代码类似于

$(function() {
    // other codes changing html
    $('body').addClass('on');
});

body {
    opacity: 0;
    transition: opacity .5s ease-in-out;
}
body.on {
    opacity: 1;
}
main {
    transform: translateX(50xp);
    transition: transform.5s ease-in-out;
}
body.on main {
    transform: translateX(0);
}

起初它是有效的，但是在更改了其他内容之后，main的状态为transform: translateX(0);

尽管它在jsfiddle中有效，所以我怀疑更改main的html会影响过渡吗？我尝试了以下代码，它可以正常工作。为什么？

$(function() {
    // other codes changing html
    setTimeout(function(){ $('body').addClass('on'); }, 10);
});

Answer 1

发生这种情况的原因是，在加载executing之前，您的代码是html，以确保不会再次发生此现象，请始终将代码环绕在read about .ready()上

$( document ).ready(function() {
   // your code goes here
})

让我知道这是否可以解决您的问题。