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

我有一个涉及一些动画的简单页面。第一次加载页面时，用户在开始动画之前会在瞬间看到动画的最终结果。动画序列是空白屏幕，文字和句子淡入或滑入视野。我正在使用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覆盖屏幕，我会在动画开始时将其删除，但它看起来像是一个骇人的方式，我怀疑有一个更简单，更干净，更好的方法来消除意外的最终结果。请帮忙。

来源

2014-11-01 Goose

您的'ready'挂钩将在页面呈现后加载。因此，在JavaScript可以将动画元素初始化为其开始状态之前，您可能会在一瞬间看到“最终结果”。尝试彻底禁用脚本，看看它是否停留在“最终结果”上。 – 2014-11-01 19:58:25

您是否尝试过使用jQuery $（document）.ready（function（）{ ... }）; ？如果是这样，请显示其余的代码。 – 2014-11-01 19:59:32

是的，当禁用脚本时，它保持最终结果。 – Goose 2014-11-01 20:10:29

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

来源

2014-11-01 19:54:39 DripDrop

对不起，我想每个人都会认为我正在使用document.ready初始化我的代码，正如我在我的问题中提到的那样，因为我拿出了一些东西。是的，我正在使用document.ready。 – Goose 2014-11-01 20:08:16

那里。试试看。 – DripDrop 2014-11-01 20:11:21

没有。同样的结果。我试图早些时候获得动画的出发点。文档准备好和setTimeout只会延迟动画。 – Goose 2014-11-01 20:17:31

我找到了我的问题的答案。虽然这不是我正在寻找的干净答案，并且我仍然怀疑存在更直接的解决方案，但我尽可能简化了此解决方案。

在html中，我将所有内容都包围在一个div括号中。

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

在CSS中，我设置了它的属性。

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

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

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

实际上，coverDiv不包括，那么多，因为它包含了，并透露在动画的开始。

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

来源

2014-11-01 20:39:13 Goose

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

回答

相关问题