Javascript 在第一次加载时，用户可以在动画开始之前看到动画结束的一瞥

我有一个简单的页面，其中包括一些动画。第一次加载页面时，用户会在一瞬间看到动画的最终结果，然后再转到动画的开始。动画序列是一个空白屏幕，文字和句子淡入或滑入视图。我正在使用animation.css javascript库

$(document).ready(function()
{
$('#pineappleCheesecake').addClass('animated fadeIn');

$('h1').addClass('animated rubberBand');

$('p').addClass('animated bounceInUp')

$('ul').addClass('animated lightSpeedIn');

});

我试着用这个代替文档准备

document.addEventListener('DOMContentLoaded', function() {
   // ...
});

但这并不奏效。然后我试着把文件拿出来，准备好了，但结果是一样的

---

我可以尝试用一个黑色div覆盖屏幕来加载页面，我会在动画开始时删除它，但这似乎是一种黑客的方式，我怀疑有一种更简单、更干净、更好的方式来删除对最终结果的意外一瞥。请提供帮助。

在运行javascript之前，尝试将所有CSS值设置为其“默认值”。这可能会解决问题。

我已经找到了问题的答案。虽然这不是我想要的明确答案，而且我仍然怀疑有一个更直接的解决方案，但我尽可能地简化了这个解决方案

在html中，我将正文中的所有内容都用div括号括起来

<div id="coverDiv">
...
</div>

在javascript中，我通过显示coverDiv开始动画

$("#coverDiv").css("display", "inline");

实际上，coverDiv并没有覆盖它所包含的内容，而是在动画开始时显示出来

---

感谢DripDrop指导我实现此解决方案。

您的

ready

钩子将在页面呈现后加载。因此，在JavaScript将动画元素初始化为其开始状态之前，您可能会在一瞬间看到“最终结果”。尝试完全禁用脚本，看看它是否保留在“最终结果”中。您是否尝试过使用jQuery$（document）.ready（function（）{…}）？如果是这样，请显示其余的代码。是的，当脚本被禁用时，它将保留在最终结果上。对不起，我以为每个人都会认为我正在使用document.ready初始化代码，正如我在问题中提到的，这是我取出的东西。是的，我用的是document.ready.no。同样的结果。我正在尝试更早地获得动画的起点。document ready和setTimeout只会延迟动画。正如我在问题中所说的，我知道我可以做到这一点，但我想看看是否有更直接、更少黑客的解决方案。好吧。。。这将涵盖动画不。不起作用。同样的结果。这可能是在javascript运行之前发生的。

$("#coverDiv").css("display", "inline");