[分享]css3怎么设置div滑入页面

在现代网页设计中，经常会使用到CSS3动画效果来增强用户体验。其中一种常见的效果就是当用户向下滚动页面时，某个区域的内容会以动画的形式“滑”入页面。那么，如何用CSS3来实现这种效果呢？首先要确定好要...

在现代网页设计中，经常会使用到CSS3动画效果来增强用户体验。其中一种常见的效果就是当用户向下滚动页面时，某个区域的内容会以动画的形式“滑”入页面。

那么，如何用CSS3来实现这种效果呢？首先要确定好要“滑”入的区域，在HTML中使用div标签来定义这个区域：

 <div class="slide-in">
        <p>这里是要滑入页面的内容</p>
    </div> 

接下来，在CSS中给这个div定义样式，并使用transform和transition属性来实现动画效果：

 .slide-in {
        opacity: 0;   /* 初始时隐藏内容 */
        transform: translateY(100px);   /* 沿y轴向下平移100px */
        transition: all 0.5s ease-in-out;   /* 定义过渡效果，耗时0.5秒 */
        /* 其他样式，比如背景色、边框、圆角等 */
    }

    .slide-in.active {
        opacity: 1;   /* 当div显示时，显示内容 */
        transform: translateY(0);   /* 平移回原来的位置 */
    } 

在CSS中定义.slide-in样式后，还要使用JavaScript来触发动画效果。在JavaScript中，获取需要“滑”入的div元素，并添加一个类名.active，让它的样式变为.slide-in.active：

 const slider = document.querySelector('.slide-in');
    window.addEventListener('scroll', debounce(checkSlide));   /* 添加滚动事件 */
    function checkSlide() {
        const slideInAt = (window.scrollY + window.innerHeight) - slider.clientHeight / 2;   /* 计算div底部到视口中心的距离 */
        const divBottom = slider.offsetTop + slider.clientHeight;   /* div底部到页面顶部的距离 */
        const isHalfShown = slideInAt > slider.offsetTop;
        const isNotScrolledPast = window.scrollY < divBottom;
        if (isHalfShown && isNotScrolledPast) {
            slider.classList.add('active');   /* 当div元素显示在视口内时，添加.active类名 */
        } else {
            slider.classList.remove('active');   /* 否则，移除.active类名 */
        }
    }
    function debounce(func, wait = 20, immediate = true) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    } 

如上述代码所示，添加了一个debounce函数来让滚动事件不频繁地触发。当div元素显示在视口内时，JavaScript会自动添加.active类名，这时就会触发CSS3动画效果，把内容以“滑”的方式显示出来。