Question

我有一个涉及一些动画的简单页面。第一次加载页面时，用户在进入动画开始之前会在瞬间看到动画的最终结果。动画序列是空白屏幕，单词和句子逐渐淡入或滑入视图。我正在使用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，我会在动画开头删除它，但它似乎是一种做法的hackish方式，我怀疑有一个更简单，更清洁，更好消除最终结果的意外瞥见的方法。请帮忙。

Answer 1

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

Answer 2

我找到了问题的答案。虽然这不是我想要的干净答案，但我仍然怀疑那里有更直接的解决方案，我使这个解决方案尽可能简单。

在html中，我用div括号包围了身体里的所有东西。

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

在CSS中，我将它的属性设置为此。

#coverDiv {
    background: black;
    display: none;
}

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

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

实际上，coverDiv没有覆盖，包含它，并且在动画开始时显示。

感谢DripDrop引导我走向这个解决方案。

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

2 个答案: