Question

我可以理解这段代码中发生了什么。有人可以告诉我怎么回事

我试图分析每个功能，但我还是不明白

var animatepage = function() {
    var elems;
    var windowHeight;

    function init() {
        elems = document.querySelectorAll(".hidden");
        windowHeight = window.innerHeight;
        addEventHandlers()
        checkPosition()
    }

    function addEventHandlers() {
       window.addEventListener('scroll', checkPosition);
       window.addEventListener('resize', init)
    }

    function checkPosition() {
        for(var i=0; i < elems.length; i++) {
            var positionTop = elems[i].getBoundingClientRect().top;
            if ((positionTop-windowHeight) <= 0) {
                elems[i].className = elems[i].className.replace(
                    'hidden',
                    'fade-in-element'
                );
            };

        };
    };
    return {
        init: init
    };
};
animatepage().init();

Answer 1

目的是当元素在页面中可见时添加CSS类“ fade-in-element”。

init()查找具有CSS类“隐藏”的所有元素。
addEventHandlers()确保用户滚动或调整窗口大小时，我们检查是否有新元素可见。
checkPosition()然后找到当前可见的所有元素，并为它们提供CSS类“ fade-in-element”。该类可能会包含一些CSS过渡，以使元素逐渐淡入。

有人可以向我解释此功能的作用是什么

1 个答案: