WOW JS在看不见的元素上不起作用

Question

WOW JS适用于视图中的元素，但是当我滚动动画时，不适用于其他块。可能是什么问题呢？

$(function() {
  new WOW().init();
});

html {
  background: #000 /*url('ocf.berkeley.edu/~sather/wp-content/uploads/2018/01/')*/ no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.page-content {
  padding: 0 10px;
}

.block_white {
  border-radius: 5px;
  background-color: white;
  height: 180px;
  margin: 5px 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<div class="mdl-grid">
  <div class="wow bounceInUp animated block_white dl-cell mdl-cell--4-col">

  </div>
  <div class="wow bounceInUp animated block_white dl-cell mdl-cell--4-col">

  </div>
  <div class="wow bounceInUp animated block_white dl-cell mdl-cell--4-col">

  </div>
  <div class="wow bounceInUp animated block_white dl-cell mdl-cell--4-col">

  </div>
  <div class="wow bounceInUp animated block_white dl-cell mdl-cell--4-col">

  </div>
  <div class="wow bounceInUp animated block_white dl-cell mdl-cell--4-col">

  </div>
</div>

screenshot of the problem