滚动上的Javascript / CSS动画

Question

我在一个个人网站上工作，遇到一个问题。 当元素出现时，我正在使用此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%);
    }   
}

因此，我可以将其用于一个元素。 但是，如果我将此类附加到五个元素，则在查看第一个元素后，所有五个元素都将开始动画。 什么是最好的方法，以便每个元素都使用相同的类和相同的JS脚本，但是每个元素在专门显示时会动画显示？ 我已经尝试了一些方法，但是它们似乎不起作用。 有什么建议么？ 谢谢！

Answer 1

编辑：添加了演示

首先，创建一个函数来检查视口中的哪些元素需要动画。

像这样：

 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); 

在function isElementInViewport(elem)可以：

var $elem = elem;

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

工作演示