不正确的视口大小导致动画无法在滚动EXCUTE

注：这已经得到解决。看看这个帖子底部的修复。不正确的视口大小导致动画无法在滚动EXCUTE

我有我拉我的头发在过去几天这个奇特的问题。谢天谢地，我认为我已经将它隔离到了不正确的窗口/文档高度，导致我的滚动动画永远不会出现。我试图使用lightSpeedIn动画从animate.css动画在H2标题，但wow.js只会隐藏元素，从来没有透露它，尽管滚动过去吧。如果我删除wow.js，并且只使用Animate.css h2的标题将动画就好了。

我已经做了一些调试，使用下面的代码，我想我知道为什么wow.js（我也试图使用其他滚动库没有成功）正在打破 - 由于某种原因，jQuery报告窗口高度和文档高度为943.网站上显然有一个滚动条，所以我很确定我做的任何滚动实现都不起作用，因为代码从来没有看到任何要滚动的内容。

<div id="console"> 
    $(window).height() = <span id="winheight"></span> <br/> 
    $(document).height() = <span id="docheight"></span> 
</div>

会导致出现在网站上的以下。

实现与wow.js - 不工作

<h2 class="section-heading text-center wow lightSpeedIn">Sputnik Fact Sheet</h2>

在这种情况下wow.js似乎assiging以下样式的标题，但它从来没有似乎被切换。

visibility: hidden; animation-name: none

实现，只有animate.css - 工程

<h2 class="section-heading text-center animated lightSpeedIn">Sputnik Fact Sheet</h2>

关于这个奇怪的事实是，问题只出现在网站上的一个组成部分 - 我有哇.js在其他部分工作得很好。有些用萤火虫挖掘发现，动画“lightSpeedIn”在它不存在时就不存在。我甚至试图从网站的其他区域（例如传统标签）复制和粘贴动画名称到h2元素中，但它总是认为动画名称不存在。

我难倒如何去修复这一点。任何人有任何洞察我的问题？您可以查看此问题的现场演示here。

更新1：我认为这可能是一个插件/库不兼容，所以我删除了一切，但animate.css和wow.js - 没有解决任何问题。我完全被难住了。

更新2：使用其他滚动库尝试。他们也不工作。将其缩小到可能存在的问题，即内容对视口“不可见”。

UPDATE 3：实测溶液。这是超级简单 - 我有溢出-x：隐藏在我的HTML，身体选择器。我删除它，现在wow.js脚本正常工作。

来源

2015-11-06 Tyrx

找到解决方案。这是超级简单的 - 我有我的HTML，身体选择器隐藏溢出X：隐藏。我删除它，现在wow.js脚本正常工作。

以前的CSS代码

html,body { 
    height: 100% !important; 
    margin: 0; 
    background-color: #161519; 
    color: #fffafa; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: 14.5px; 
    line-height: 1.42857; 
    max-width: 100%; 
    overflow-x: hidden 
}

固定的CSS代码

html,body { 
    height: 100% !important; 
    margin: 0; 
    background-color: #161519; 
    color: #fffafa; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: 14.5px; 
    line-height: 1.42857; 
    max-width: 100%; 
}

来源

2015-11-12 00:03:38 Tyrx

不正确的视口大小导致动画无法在滚动EXCUTE

回答

相关问题