Question

为什么hss在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做什么，CSS都会在DOM中找到它的元素时立即应用。

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

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

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

1 个答案: