为什么 css 动画在 jquery 滚动之前运行

Question

为什么 html 中的 css 在 jquery 之前运行？所以当我滚动页面时，动画 FlipInX 没有运行，但是当我在 hexa 元素上刷新页面时，它运行得很好，

所以，我认为它运行得很好，但它只是在 jquery 之前

有人知道我该怎么办吗？

<div class="col-sm-3 hexa-col flipInX" data-animation="flipInX" data-delay=".2s" style="animation-delay: 0.2s;">
<div class="col-sm-3 hexa-col flipInX" data-animation="flipInX" data-delay=".2s" style="animation-delay: 0.4s;">



    @keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }
  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1; }
  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(5deg); }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1; } }

jQuery 代码

    $(window).scroll(function(){
    var wScroll = $(this).scrollTop();
31
    if (wScroll > $('.about').offset().top -100) {
        $('.about').each(function(i){
            setTimeout(function() {
                $('.about .disappearleft').eq(i).addClass('appearleft');
                $('.about .hexa').eq(i).addClass('appear');

            }, 300*(i+1));
        }); 
    }

});

Answer 1

无论你的 JS 在做什么，只要它在 DOM 中找到它的元素，就会应用 CSS。

您可以随时使用 jQuery 以编程方式将 flipInX 类添加到您的元素中。看起来你已经在你的 .about 元素上这样做了。

$(window).scroll(function(){
    var wScroll = $(this).scrollTop();
    if (wScroll > $('.hexa-col').offset().top -100) {
       $(".hexa-col").attr("data-animation", "flipInX");
    }
});