Javascript 如何在div进入视图后使用砖石和css设置其动画？

现在，我有一个页面，其中的div使用massy.js组织在一个网格中。我的那部分工作得很好。我现在要做的是使用CSS效果，使div在向下滚动时淡入视图，模拟扩展滚动

我遵循这个教程，甚至下载了他们的zip，试图了解它到底是如何工作的，但我仍然有问题

虽然我怀疑这本身能解决问题，但我注意到脚本中有一点，它是document.getElementByID。但是我试图应用这个效果的div是div类，而不是divid。我需要在脚本中更改什么才能使其正常工作

请注意，在codepen中，由于某些原因，我的网格没有正确对齐，但在我的机器上，砖石工作正常

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

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

});

---

请记住，当您热链接到GitHub上的文件时，就像在代码笔中一样，您需要链接到rawgit.com-so and。对于目标类而不是div，您可以使用。好的，谢谢，我对js链接做了更改。但是，您刚才发布的mozilla链接不起作用。我添加了getElementByClassName，get error undefined不是该行的函数。它是getElementsByClassName。注意复数形式。有关实现，请参阅。