Javascript CSS不透明度转换无法添加类

在选择器

#loginForm>div:first child h1

上执行简单的css不透明转换时，我遇到了一个问题，只需使用javascript将类

.animated

添加到该元素。虽然它不起作用。代码如下：

document.querySelector（“#loginForm>div:nth child（2）”）.style.display='none'；
document.querySelector（'#loginForm>div:first child'）.style.display='block'；
var-verified_text=document.querySelector（'loginForm>div:first-child h1'）；
已验证的_text.classList.add（'animated'）
#loginForm{
位置：相对位置；
填充：40px；
背景色：#fcde84；
边界半径：5px；
边缘顶部：75px；
宽度：462px；
}
#loginForm>div：第一个孩子{
高度：380px；
边界：0；
滤镜：阴影（5px 8px 8px rgba（0,0,0,0.1））；
}
#loginForm>div：第一个子div{
页边顶部：165px；
}
#loginForm>div div{
宽度：150px；
高度：150像素；
保证金：0自动；
溢出：隐藏；
}
#loginForm>div:第一个子项h1{
字体系列：“Arial圆角MT”；
颜色：rgb（109、204、91）；
文本对齐：居中；
显示：块；
过渡：所有5s都放松下来；
不透明度：0；
}
#loginForm>div:第一个子项h1.1{
不透明度：1；
}
#登录表单h2{
字体大小：34px；
文本转换：大写；
线高：24px；
颜色：#2f4e71；
字母间距：-2px；
字号：700；
字体系列：“蒙特塞拉特”，无衬线；
}
#登录表单p{
字号：17px；
线高：40px；
颜色：#333850；
显示：块；
利润率：0.10px；
字号：700；
}
#loginForm>div:n子（2）div{
边界半径：50%；
边框：实心2.5px#3A5E77；
}
#逻辑信息表{
填充：10px 15px 10px 30px；
背景色：#fc7f77；
颜色：白色；
边界半径：7.5px；
边际：12px0；
显示：无；
}
#罗金福李{
文本对齐：居中；
显示：块；
字体大小：24px；
}
#loginForm标签{
边际：0.12像素；
显示：块；
字号：1.25em；
颜色：#217093；
字号：700；
}
#登录表单输入{
边界半径：32.5px；
高度：65px；
宽度：100%；
字号：600；
字号：1.55em；
过渡：长方体阴影。2s线性，边框颜色。25s缓和，背景色。2s缓和；
}
#电子邮件，
#密码{
边际：0.24px；
填充：0 1em 0；
背景色：#f3fafd；
边框：实心2px#217093；
}
#电子邮件：focus，
#密码：focus{
大纲：无；
盒影：0px210pxRGBA（0,0,0,0.1）；
边框：实心2px#4eb8dd；
}
#loginForm输入[type=“submit”]{
填充：.65em 1em 1em；
背景色：#4eb8dd；
颜色：#FFF；
}
#loginForm输入[type=“submit”]：悬停{
背景色：#217093；
}

已证实的
加入我们的社区
登录即可即时访问我们的视频课程

SVG在这里

用户名
密码
因为就浏览器而言，CSS和JavaScript几乎同时加载，所以未检测到
转换。将JavaScript的最后一行更改为：

setTimeout(()=>{
  verified_text.classList.add('animated');
}, 100);

我把你的逻辑放在一个可运行的片段中。什么不起作用？似乎很好。我希望通过将动画类添加到其h1元素，验证单词是否使用其不透明度属性淡入。我将附加问题的视频尝试在添加动画类
document.body.offsetHeight之前添加这一行哦，谢谢，这太棒了，但是CSS不应该加载在页面顶部吗？你会认为这很有意义。现在你只需要说服浏览器供应商。