显示滚动使用此模板显示动画相互

Question

我'后：https://startbootstrap.com/template-overviews/creative/与插件jQuery的滚动显示

如果你看看这个页面：https://blackrockdigital.github.io/startbootstrap-creative/#services

的动画（迪蒙德，纸飞机，报纸，心脏）相继加载。当数字完成时，图标数字2开始动画。

当我尝试做同样的事情时，所有动画都是同时加载的。

的JavaScript（只是增加.sr-step到模板）

// Initialize and Configure Scroll Reveal Animation 
window.sr = ScrollReveal(); 
sr.reveal('.sr-icons', { 
    duration: 600, 
    scale: 0.3, 
    distance: '0px' 
}, 200); 
sr.reveal('.sr-button', { 
    duration: 1000, 
    delay: 200 
}); 
sr.reveal('.sr-step', { 
    duration: 600, 
    delay: 200 
}); 
sr.reveal('.sr-contact', { 
    duration: 600, 
    scale: 0.3, 
    distance: '0px' 
}, 300); 

这是我的HTML

   <div class="row"> 
        <div class="col-lg-3 col-md-6 sr-step"> 
          <h3 class="step-number">01</h3> 
          <div class="step-text"><p>Text text text text.</p> 
         </div> 
        </div> 
        <div class="col-lg-3 col-md-6 sr-step"> 
         <h3 class="step-number">02</h3> 
         <div class="step-text">Text text text text.</div> 
       </div> 
        <div class="col-lg-3 col-md-6 sr-step"> 
         <h3 class="step-number">03</h3> 
         <div class="step-text">Text text text text.</div> 
       </div> 
       <div class="col-lg-3 col-md-6 sr-step"> 
        <h3 class="step-number">04</h3> 
       <div class="step-text">Text text text text.</div> 
     </div> 
    </div> 

Answer 1

发现延迟上200

sr.reveal('.sr-icons', { 
    duration: 600, 
    scale: 0.3, 
    distance: '0px' 
}, 200);