我的代码有点像
$(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之前，您的代码是executing，以确保这种行为不会再次发生。请始终围绕read-about.ready((包装您的代码
$( document ).ready(function() {
// your code goes here
})
编辑：transform: translateX(50xp);中的xp语法问题
main {
transform: translateX(50px);
transition: transform.5s ease-in-out;
}
如果这能解决你的问题，请告诉我。