javascript - 在第一次加载时，用户会在动画开始之前看到动画结束的一瞥

Question

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

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

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

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

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

});

我试过用这个代替 document ready

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

但这没有用。然后我尝试完全取出 document.ready，但我得到了相同的结果。

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

Answer 1

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