为什么CSS动画在jQuery卷轴之前运行

Question

为什么在jQuery之前进行HTML中的CSS？因此，当我滚动页面时，动画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

css一旦在DOM中找到其元素，无论您的JS在做什么，它都会立即应用。

您可以使用jQuery在需要时将Flipinx类添加到您的元素中。看起来您已经在.ab的元素上进行此操作。

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