javascript - DIV出现时添加CSS动画

Question

如果你看一下this website ，您会看到当您滚动并点击某些区域时，会播放淡入淡出的动画，并显示内容。我已经尝试通过源代码来了解他们是如何做到这一点的，但我还没有找到任何运气。

我猜他们使用 Javascript/jQuery 在 DIV 出现时添加一个类，如下所示:

$('#element').addClass('animation');

但问题是他们如何知道 DIV 何时出现调用此类 Javascript？

Answer 1

它在 http://hockeyapp.net/javascripts/jquery.features.js 中

这里稍微更漂亮:

function f_scrollTop() {
    return f_filterResults(
        window.pageYOffset ? window.pageYOffset : 0,
        document.documentElement ? document.documentElement.scrollTop : 0,
        document.body ? document.body.scrollTop : 0
    )
}

function f_filterResults(e, t, n) {
    var r = e ? e : 0;
    return t && (!r || r > t) && (r = t), n && (!r || r > n) ? n : r
}

$(document).ready(function() {
    var e = navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? !0 : !1;

    e ? ($("#crashes").css("opacity", 1),
        $("#feedback").css("opacity", 1),
        $("#distribution").css("opacity", 1),
        $("#analytics").css("opacity", 1),
        $("#customers").css("opacity", 1))
      : ($(window).scroll(function() {

            var e = $("body").height(),
                t = f_scrollTop(),
                n = 0;
            t > 250 && (n = 1), $("#crashes").css("opacity", n)

        }), $(window).scroll(function() {

            var e = $("body").height(),
                t = f_scrollTop(),
                n = 0;
            t > 2250 && (n = 1), $("#feedback").css("opacity", n)

        }), $(window).scroll(function() {

            var e = $("body").height(),
                t = f_scrollTop(),
                n = 0;
            t > 3100 && (n = 1), $("#distribution").css("opacity", n)

        }), $(window).scroll(function() {

            var e = $("body").height(),
                t = f_scrollTop(),
                n = 0;
            t > 4400 && (n = 1), $("#analytics").css("opacity", n)

        }), $(window).scroll(function() {

            var e = $("body").height(),
                t = f_scrollTop(),
                n = 0;
            t > 3200 && (n = 1), $("#customers").css("opacity", n)

        })), $(".switch-monthly").live("click", function(e) {
            $(this).addClass("switch-yearly"), $(this).removeClass("switch-monthly"), $(".price.monthly").fadeOut(), $(".price.yearly").fadeIn(), $(".save").slideDown(), e.preventDefault()
        }), $(".switch-yearly").live("click", function(e) {
            $(this).removeClass("switch-yearly"), $(this).addClass("switch-monthly"), $(".price.monthly").fadeIn(), $(".price.yearly").fadeOut(), $(".save").slideUp(), e.preventDefault()
        }), $(".fancybox").fancybox({openEffect: "elastic",closeEffect: "elastic"})
});

f_scrollTop 和 f_filterResults 形成一种跨浏览器的方式来查找页面滚动的距离。

在 document.ready 上，他们将五个函数绑定(bind)到 $(window).scroll。每次滚动时，它都会使用 t = t_scrollTop() 获取距离，并根据 t 的值将 n 设置为 1 或 0 .然后设置每个 div 的不透明度 (#crashes, #feedback, #distribution, #analytics, #customers) 到 n。 (下面有更好的解释)

因此，他们不知道 div 何时出现 - 每次滚动时它都会检查它是否出现并相应地设置不透明度。此外，他们不使用 animate，而是为 http://hockeyapp.net/stylesheets/public.css 中的四个 div 设置了 CSS transition (不要尝试阅读):

#distribution,
#crashes,
#feedback,
#analytics {
   opacity: 0;
   -webkit-transition:opacity .5s ease-in-out 0s
}

---

像这样的行:

t > 250 && (n = 1), $("#crashes").css("opacity", n)

逗号运算符表示“计算每个表达式，整个表达式的值是最后一个的值。”此处可能只是为了简洁起见，因为源代码已被缩小。

由于 n 已经是 0 并且 && 短路，如果 t > 250 那么它将评估 (n = 1) ，否则它会将 n 保留为 0。然后将不透明度设置为 n。