vue中监听元素是否出现在可视区域

最新推荐文章于 2024-03-22 11:55:06 发布

kilito_01

最新推荐文章于 2024-03-22 11:55:06 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/kilito_01/article/details/130268133

版权

  mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.initSwiper()
            }, 10)

            const observer = new IntersectionObserver(entries => {
                entries.forEach(entry => {
                    // console.log(entry);
                    const target = entry.target;
                    if (entry.isIntersecting) {
                    // 根据每个特定的元素  添加或者删除 类名 来添加 动画效果
                        if (target.className.indexOf('item-1') > -1) {
                            target.classList.add('fadeInLeft')
                            target.classList.remove('fadeOutLeft')
                        }
                        if (target.className.indexOf('item-2') > -1) {
                            target.classList.add('fadeInRight')
                            target.classList.remove('fadeOutRight') 
                        }
                        if (target.className.indexOf('item-3') > -1) {
                            target.classList.add('fadeInLeft')
                            target.classList.remove('fadeOutLeft')
                        }
                        if (target.className.indexOf('item-4') > -1) {
                            target.classList.add('fadeInRight')
                            target.classList.remove('fadeOutRight') 
                        }
                    } else {
                        if (target.className.indexOf('item-1') > -1) {
                            target.classList.add('fadeOutLeft')
                            target.classList.remove('fadeInLeft')
                        }
                        if (target.className.indexOf('item-2') > -1) {
                            target.classList.add('fadeOutRight')
                            target.classList.remove('fadeInRight')
                        }
                        if (target.className.indexOf('item-3') > -1) {
                            target.classList.add('fadeOutLeft')
                            target.classList.remove('fadeInLeft')
                        }
                        if (target.className.indexOf('item-4') > -1) {
                            target.classList.add('fadeOutRight')
                            target.classList.remove('fadeInRight') 
                        }

                    }
                });
            });

            const divs = document.querySelectorAll('.list > .item');
            divs.forEach(div => {
                observer.observe(div);
            });
        })
    },

     <div class="list">
                <div class="item item-1">
                    <img src="./images/1.png" alt="">
                </div>
                <div class="item item-2">
                    <img src="./images/2.png" alt="">
                </div>
                <div class="item item-3">
                    <img src="./images/3.png" alt="">
                </div>
                <div class="item item-4">
                    <img src="./images/4.png" alt="">
                </div>
            </div>

@keyframes fadeInLeft{
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeOutLeft{
    0%{
        opacity: 1;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(-100%);
    }
}
@keyframes fadeInRight{
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeOutRight{
    0%{
        opacity: 1;
        transform: translateX(0);
    }
    100%{
        opacity: 0;
        transform: translateX(100%);
    }
}
.fadeInLeft{
    animation: fadeInLeft 1s 0s linear forwards;
}
.fadeOutLeft{
    animation: fadeOutLeft 1s 0s linear forwards;
}
.fadeInRight{
    animation: fadeInRight 1s 0s linear forwards;
}
.fadeOutRight{
    animation: fadeOutRight 1s 0s linear forwards;
}

简单的就是

// IntersectionObserver 监听元素是否出现在可是区域
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
  // entry.isIntersecting 为true 就是出现在页面中了
    if (entry.isIntersecting) {
    // target 就是当前的元素
      const target = entry.target;
      target.classList.add('animate');
    }
  });
});
 // 获取所有的 div
const divs = document.querySelectorAll('.parent > div');
divs.forEach(div => {
  // 循环添加监听
  observer.observe(div);
});