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

【问题标题】：jQuery addClass when document onload does not trigger child element CSS transition当文档加载不触发子元素CSS转换时的jQuery addClass
【发布时间】：2020-03-28 17:24:39
【问题描述】：

我的代码是这样的

$(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);
});

完整的HTML太长，虽然结构很简单

<body>
    <nav></nav>
    <main>
        <header></header>
        <article></article>
    </main>
</body>

body 中的所有内容都是用 javascript 生成的。

【问题讨论】：

也发布你的html

标签： jquery css-transitions

【解决方案1】：

发生这种情况的原因是，在加载 html 之前，您的代码是 executing，以确保不会再次发生这种行为，始终将您的代码包裹在 read about .ready() 周围

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

编辑：语法问题xp in transform: translateX(50xp);

main {
    transform: translateX(50px);
    transition: transform.5s ease-in-out;
}

如果这能解决您的问题，请告诉我。

【讨论】：

另一个最佳实践是将<script>标签放在</body>标签的结尾之前
OP 已经在使用$(function() {})，这是$(document).ready()的简写
谢谢您，尽管语法错误仅在问题中，而不在实际文件中。 $('body').addClass('on'); 之前的任何时间延迟或任何警报都会解决，我想知道最好的解决方案是什么。
但是你怎么知道main里面的代码是生成然后transition添加的呢？
我不知道...我想知道如何确保这一点。