为什么我的div没有滚动动画？

Question

http://codepen.io/donnaloia/pen/IekLw

我正在尝试使用砌体和animonscroll.js复制鼓膜演示。 唯一的区别是我使用的div卡中包含图像，而不仅仅是图像。

这是工作中的鼓膜演示http://jsfiddle.net/Sfmv9/19/light/

这是我的代码： http : //codepen.io/macsupport/pen/eghEm

您可以看到我有砌体的工作，但是滚动效果的动画没有起作用。 实际上，我已经尝试了好几个星期，但无法弄清楚我做错了什么。

这是我的JavaScript，其余代码在我的codepen链接中。

   $(document).ready(function() {
      $('.container').imagesLoaded(function() {
      $('.container').masonry({
       itemSelector: '.grid_4',
       isFitWidth: true,
       gutter: 8
      });

      });

    new AnimOnScroll( document.getElementById( '.grid_4' ), {
            minDuration : 0.4,
            maxDuration : 0.7,
            viewportFactor : 0.2
          } );

    });

Answer 1

这是一个分叉的Codepen： http ://codepen.io/anon/pen/CotJv

看起来您的Codepen有一些问题。

1）您的Codepen不完整。 与链接到的jsfiddle不同，codepen并没有所有资源。 如果添加animOnScroll和animate CSS（我从工作提琴中仅复制了一个，则可能需要另一个动画），等等。您不会立即抛出错误。

2）jsfiddle页面上引用的animOnScroll.js文件在内部处理imagesLoaded和石工初始化。 如果您要使用该文件，建议您允许animOnScroll.js继续处理这些文件。

3） animOnScroll.js文件需要特定的DOM树。 具体来说，它希望查看无序列表（ ul和li ）。 如果您不介意托管文件，则可以直接对文件进行更改并更改这些要求。

所有这一切，下面是一个分叉的代码笔，说明了这些更改：

再次，codepen： http ://codepen.io/anon/pen/CotJv

我保留您的标记，但是更新JS使其可以使用。 具体更改为：

第89行（应用CSS动画类的元素）：

this.items = Array.prototype.slice.call( document.querySelectorAll( '.grid_4' ) );

先前：

this.items = Array.prototype.slice.call( document.querySelectorAll( '#' + this.el.id + ' > li' ) );

行：100（初始化砌体）-在这里，我们对类名（ .grid_4 ）进行硬编码：

itemSelector: '.grid_4',

先前：

itemSelector: 'li'

希望这会有所帮助！