滚动上的 Javascript/CSS 动画

Question

我在个人网站上工作时遇到了一个问题。当元素进入 View 时，我正在使用这个 Javascript 来激活 CSS 动画:

    function isElementInViewport(elem) {
    var $elem = $(elem);

    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function checkAnimation() {
    var $elem = $('.slideUp');

    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

这是 HTML:

<img src="analyze.png" width="343" height="196" alt="Analyze" class="slideUp">

这是我的 CSS :

.slideUp.start {
    animation-name: slideUp;
    -webkit-animation-name: slideUp;    

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;

    visibility: visible !important;         
}

@keyframes slideUp {
    0% {
        transform: translateY(100%);
    }
    50%{
        transform: translateY(-8%);
    }
    65%{
        transform: translateY(4%);
    }
    80%{
        transform: translateY(-4%);
    }
    95%{
        transform: translateY(2%);
    }           
    100% {
        transform: translateY(0%);
    }   
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
    }
    50%{
        -webkit-transform: translateY(-8%);
    }
    65%{
        -webkit-transform: translateY(4%);
    }
    80%{
        -webkit-transform: translateY(-4%);
    }
    95%{
        -webkit-transform: translateY(2%);
    }           
    100% {
        -webkit-transform: translateY(0%);
    }   
}

所以我可以让它对一个元素起作用。但是，如果我将此类附加到五个元素，则一旦第一个元素出现在 View 中，所有五个元素都将开始动画。最好的方法是什么，以便每个元素都使用相同的类和相同的 JS 脚本，但每个元素在特定进入 View 时都具有动画效果？我尝试了一些东西，但它们似乎不起作用。有什么建议么？谢谢!

Answer 1

编辑:添加 DEMO

首先，创建一个函数来检查哪个元素在视口(viewport)中并且需要设置动画。

是这样的:

 function checkAnimation() {
        var $elems = document.getElementsByClassName("slideUp");
        for(var i = 0; i < $elems.length; i++){
           if ($('.slideUp').eq(i).hasClass('start')) return;

           if (isElementInViewport($('.slideUp').eq(i))) {
             // Start the animation
             $('.slideUp').eq(i).removeClass('slideUp').addClass('start');
           }        
        }   
    }

然后，您可以使用 jQuery .scroll() 事件处理程序来触发该函数。

像这样:

$(window).scroll(function () {
    checkAnimation();
});

最后，改变:

var $elem = $(elem); 

在 函数 isElementInViewport(elem) 中:

var $elem = elem;

因为我们已经传递了一个选中的元素。

WORKING DEMO