javascript - 如何使此代码更干？ (滚动时播放多个 css 动画)

Question

我有常用的 animation.css 文件和几个 div，它们位于同一位置但附加了不同的动画。它们应该同时(在页面上滚动时)动画但不同，也就是说。

这是我用于一个动画的代码:

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

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

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

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.sp-effect1');

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

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

问题是，我只知道如何让其他动画同时播放，方法是复制这段代码并调用不同的变量，然后一次又一次地运行它，只是调用不同的类 (fadeInRight 和 fadeInDown) 在不同的 div 上(sp-effect2 和 sp-effect3)。

由于此方法不是很 DRY，坦率地说有点愚蠢，我如何才能在同一代码块中获得相同的结果？

编辑:我上面粘贴的代码是干的，因为我不想粘贴实际的错误代码，它只是重复上面粘贴的代码。您必须阅读我的请求才能理解我的意思。

Answer 1

如果问题是您想要多个版本的 checkAnimation，每个版本都对不同的对象进行操作并使用不同的类名，那么您可以将这些因素纳入 checkAnimation() 函数的参数中并传入不同的版本。您还可以使用 .toggleClass() 来简化添加/删除类的逻辑:

// Check if it's time to start the animation.
function checkAnimation(selector, cls) {
    var $elem = $(selector);
    $elem.toggleClass(cls, isElementInViewport($elem));
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation('.sp-effect1', 'fadeInLeft');
});

然后，如果你想对具有不同类名的不同对象使用相同的代码，你可以像这样添加它们:

// Capture scroll events
$(window).scroll(function(){
    checkAnimation('.sp-effect1', 'fadeInLeft');
    checkAnimation('.sp-effect2', 'fadeInRight');
});