原生JS实现下滑到当前模块时上滑淡入淡出

<!-- 确保有足够的空间可以滚动 -->  
<div style="height: 1000px;"></div>

<div class="about-certification-img" id="renzhengimg">
    <img src="https://img-operation.csdnimg.cn/csdn/silkroad/img/1722243038734.jpg" alt="">
  </div>
</div>
  
<!-- 确保有足够的空间可以滚动 -->  
<div style="height: 1000px;"></div>

<style>
    .about-certification-img {  
    transform: translateY(100%); /* 初始位置在视口下方 */  
    opacity: 0;  
    transition: transform 1s ease, opacity 1s ease; /* 平滑过渡效果 */  
    /* 其他样式，如宽度、背景等 */  
    width: 100%; /* 示例宽度 */  
    background-color: white; /* 示例背景色 */  
    padding: 20px; /* 示例内边距 */  
    box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */  
}  
  
.visible {  
    transform: translateY(0); /* 滑到视口内 */  
    opacity: 1;  
}
</style>

<script>  
    // 节流函数  
    function throttle(func, limit) {  
        let lastFunc;  
        let lastRan;  
        return function() {  
            const context = this;  
            const args = arguments;  
            if (!lastRan) {  
                func.apply(context, args);  
                lastRan = Date.now();  
            } else {  
                clearTimeout(lastFunc);  
                lastFunc = setTimeout(function() {  
                    if ((Date.now() - lastRan) >= limit) {  
                        func.apply(context, args);  
                        lastRan = Date.now();  
                    }  
                }, limit - (Date.now() - lastRan));  
            }  
        };  
    }  
      
    function checkElementVisibility(element) {  
        var rect = element.getBoundingClientRect();  
        var viewHeight = window.innerHeight || document.documentElement.clientHeight;  
        var offset = 100; // 提前开始动画的偏移量  
      
        if (rect.top < viewHeight + offset) {  
            element.classList.add('visible');  
            element.classList.remove('hidden');  
        } else {  
            // 如果需要，可以在这里添加逻辑来移除 'visible' 类  
            // 当元素完全离开视口时  
        }  
    }  
      
    // 使用节流包装 checkElementVisibility  
    const throttledCheck = throttle(checkElementVisibility, 200); // 每200毫秒最多执行一次  
      
    document.addEventListener('scroll', function() {  
        var target = document.getElementById('renzhengimg');  
        if (target) {  
            throttledCheck(target);  
        }  
    });  
    </script>