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

Question

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

我正在尝试使用 masonry 和 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

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

您的 codepen 似乎有一些问题。

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

2) jsfiddle 页面上引用的animOnScroll.js 文件在内部处理 imagesLoaded 和 masonry init。如果您要使用该文件，我建议允许 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 行（初始化 Masonry）- 我们在这里硬编码类名 (.grid_4)：

itemSelector: '.grid_4',

以前：

itemSelector: 'li'

希望这会有所帮助！