如何使此代码更干？（滚动时播放多个 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，每个版本都对不同的对象进行操作并使用不同的 class 名称，那么您可以将这些因素纳入 checkAnimation() 函数的参数中并传递在不同的版本。您还可以使用 .toggleClass() 来简化 add/remove class 逻辑：

// 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');
});

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

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

如何使此代码更干？（滚动时播放多个 css 动画）

How do I make this code more DRY? (Multiple css animations playing on scroll over)

javascript

css

jquery

animation

如何使此代码更干？ （滚动时播放多个 css 动画）

How do I make this code more DRY? (Multiple css animations playing on scroll over)

javascript

css

jquery

animation

如何使此代码更干？（滚动时播放多个 css 动画）