Question

我正在使用animate.css CSS3动画，我希望它们在您向下滚动页面时显示。我遇到了一个问题，无法弄明白。

我使用网站上的以下脚本：

$(window).scroll(function() {
    $('#animatedElement').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideUp");
        }
    });
});

我对此进行了一些修改：

$(window).scroll(function() {
    $('.hidden').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).removeClass("hidden").addClass("animated");
        }
    });
});

我希望隐藏这些元素，直到它们位于网站的可见区域，然后我给它们一个名为＆＃34; hidden＆＃34;不透明度：0或可见性：隐藏。

即使脚本成功删除了＆＃34; hidden＆＃34; -class并添加了＃34;动画＆＃34; -class，也没有动画，只显示该元素。

我认为它与＆＃34; hidden＆＃34; -class的css有关，但即使我在这个类下没有定义任何东西，也没有动画。

如果我更改脚本以添加＆＃34;动画＆＃34; -class的特定动画类，它可以工作，但只能没有＆＃34;隐藏＆＃34; -class。

我希望你理解我的意思，这很难解释，所以我做了一个小提琴。

http://jsfiddle.net/79MJs/

但是，我希望脚本能够处理不同的动画，而不仅仅是小提琴中的动画。

我真的无法弄清楚这一点，所以我真的很感激任何帮助。谢谢！

Answer 1

你的行为是因为你给了#an; .animated＆＃39;从一开始的类，动画在你到达元素之前终止。

请注意，您还需要修改html和css代码，以便根据需要使用动画。

请参阅以下演示多个动画的演示。

JS：

var animations = ['animated', 'animated-right'];
var i = 0;
$(window).scroll(function() {
    $elem = $('.hidden:first');
    var imagePos = $elem.offset().top;
    var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow + 400) {
        var animationClass = animations[i % 2 == 0 ? 1 : 0];
        $elem.removeClass("hidden")
             .addClass(animationClass);
        i++;
    }
});

CSS

.hidden { visibility: hidden;}
.vertical-slide {
    border: 1px solid #000;
    height: 500px;
}
.animated,
.animated-right{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes animated {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes animated {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translatex(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.animated {
  -webkit-animation-name: animated;
  animation-name: animated;
}

.animated-right {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

HTML：

<div class="vertical-slide">
    <article>
        <h1 class="animated">1</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">2</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">3</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">4</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">5</h1>
    </article>
</div>

使用jQuery的animate.css和基于滚动的动画

1 个答案: