jQueryを使用して非同期CSSアニメーションを開始する

Question

私は、スクロール・イン・ビューでアニメーションを達成しようとしています。私は動作するこのバージョンを作ったが、それは非常に長く繰り返しコードを持っている。私はdivを数え、それらをループして一つずつアニメーション化しようとしましたが、うまく動作しないようです。助言がありますか？私はどこにいても同じような問題は見つけられませんでした。

ありがとうございます。

$(document).ready(function() { 
 
    var scrollTop, 
 
     windowHeight = ($(window).height())/2, 
 
     divScrollTop = $("section").offset().top; 
 
    
 
    $(window).on('scroll', function() { 
 
    scrollTop = $(window).scrollTop(); 
 
     if (windowHeight + scrollTop >= divScrollTop) { 
 
      setTimeout(function() { 
 
       $(".card:nth-of-type(1)").addClass('animate'); 
 
      }, 0); 
 
      setTimeout(function() { 
 
       $(".card:nth-of-type(2)").addClass('animate'); 
 
      }, 300); 
 
      setTimeout(function() { 
 
       $(".card:nth-of-type(3)").addClass('animate'); 
 
      }, 600); 
 
      setTimeout(function() { 
 
       $(".card:nth-of-type(4)").addClass('animate'); 
 
      }, 900); 
 
     } 
 
    }); 
 
    
 
})

section { 
 
    margin-top: 100%; 
 
    
 
    height: 800px; 
 
} 
 
.card { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: #000; 
 
    margin-right: 10px; 
 
    transition: all 1s; 
 
    display: inline-block; 
 
    opacity: 0; 
 
} 
 

 
@keyframes slideUpFadeIn { 
 
    from { 
 
    transform: translateY(50px); 
 
    opacity: 0 
 
    } 
 
    to { 
 
    transform: translateY(0); 
 
    opacity: 1 
 
    } 
 
} 
 

 
.animate { 
 
    animation: slideUpFadeIn 1s forwards; 
 
}

<section> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
</section> 
 

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

Answer 1

あなたはできるjqueryの内の各を使用してdivタグをループ。その後、ループ内の各アニメーションを遅延させます。

$(document).ready(function() { 
 
    var scrollTop, 
 
     windowHeight = ($(window).height())/2, 
 
     divScrollTop = $("section").offset().top; 
 
    
 
    $(window).on('scroll', function() { 
 
    scrollTop = $(window).scrollTop(); 
 
     if (windowHeight + scrollTop >= divScrollTop) { 
 
      $(".card").each(function(i) { 
 
       $(this).delay(i*300).queue(function() { 
 
        $(this).addClass('animate').dequeue(); 
 
       }); 
 
      }) 
 
     } 
 
    }); 
 
});

section { 
 
    margin-top: 100%; 
 
    
 
    height: 800px; 
 
} 
 
.card { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: #000; 
 
    margin-right: 10px; 
 
    transition: all 1s; 
 
    display: inline-block; 
 
    opacity: 0; 
 
} 
 

 
@keyframes slideUpFadeIn { 
 
    from { 
 
    transform: translateY(50px); 
 
    opacity: 0 
 
    } 
 
    to { 
 
    transform: translateY(0); 
 
    opacity: 1 
 
    } 
 
} 
 

 
.animate { 
 
    animation: slideUpFadeIn 1s forwards; 
 
}

<section> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
    <div class="card"></div> 
 
</section> 
 

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