前端效果-实现滑到指定位置淡出展示

发现的问题： 本来想直接用visibility,然后就发现visibility加上动画没有效果，还是会在一瞬间就展示

因为visibility 0表示“隐藏”，1表示完全“显示”,当由0到1过渡时，一旦不为0 了（例如0.0001)，就会立马显示。当由1到0过度时，经过3秒钟时间，变为0时就立马消失了，所以没有过渡效果。

然后就想到用opacity，最后才实现。

在网上找到一些知识：有人可能要问，那为什么不直接用opacity，还要加上visibility， 不是脱裤子放屁吗，这里就涉及到opacity和visibility的区别了。

• opacity:0，元素隐藏起来了，不会改变页面布局, 但是可以响应事件，比如click
• visibility:hidden, 元素隐藏起来. 不会改变页面布局, 不会响应事件
• display:none, 可以理解成在页面中把该元素删除掉一样

页面

    <div class="con">
        <div class="item">
        </div>
        <div class="item">
            <div class="isShow">
                <div class="img-box">
                    <img class="img" src="./show.jpg">
                    <img class="img" src="./show.jpg">
                    <img class="img" src="./show.jpg">
                    <img class="img" src="./show.jpg">
                </div>
            </div>
        </div>
        <div class="item">
            <div class="isShow">
                <h1 class="title">加油，奥利给</h1>
            </div>
        </div>
    </div>

样式

        * {
            margin: 0;
            padding: 0;
        }

        body {
            --cor: red;
            --re: blue;
            --tt: yellow;
        }

        .con {
            width: 100%;
        }

        .item {
            height: 1200px;
        }

        .item:nth-child(1) {
            background-color: var(--cor);
        }

        .item:nth-child(2) {
            background-color: var(--re);

        }

        .item:nth-child(3) {
            background-color: var(--tt);
            text-align: center;
            overflow: hidden;
        }

        .img-box {
            display: flex;
            justify-content: space-around;
        }

        .img {
            width: 200px;
            height: 200px;
            margin-top: 50px;
        }

        .title {
            margin-top: 100px;
        }

        .isShow {
            opacity: 0;
        }

        @keyframes show {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;

            }
        }

js代码

        // scroll事件只会在有滚动条的情况下才会被触发-（内容大于框架）

        // 获取窗口可视高度
        let winHeight = window.innerHeight
        let items = document.querySelectorAll('.isShow')
        // 将items变成真数组
        let itemArr = [...items];
        window.addEventListener('scroll', scroll1);
        console.log(items);

        function scroll1() {
            //检测鼠标滚轮距离顶部位置
            let top = document.documentElement.scrollTop || document.body.scrollTop;
            itemArr = clearItem(top,itemArr)
            
            itemArr.forEach(item => {
                /**
                 * 核心条件：滚轮距离大于元素距顶部的距离加屏幕高度 或则滚动距离小于自身高度和距顶部距离
                */
                if((top > (item.offsetTop-winHeight))&&(top < (item.offsetTop+item.clientHeight))){
                    item.style.animation = 'show 1s linear';
                    setTimeout(()=> {item.style.opacity = '1'},1000)
                }
            })
        }

        // 去除已经在展示的元素
        function clearItem(top,arr){
            arr = arr.filter(item=>{
                return  !item.style.animation;
            })
            return arr
        }