滚动元素出现在可视区域执行动画

最新推荐文章于 2024-07-31 16:59:37 发布

kilito_01

最新推荐文章于 2024-07-31 16:59:37 发布

阅读量287

点赞数

文章标签： vue.js

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

版权

 showEleFn() {
            this.$nextTick(() => {
                let ele = document.querySelectorAll('.item')
                let windowHeight = document.documentElement.clientHeight
                for (var i = 0; i < ele.length; i++) {
                    let currentEle = ele[i]
                    // 元素距离可视窗口高度
                    let currentEleTop = currentEle.getBoundingClientRect().top
                    // 获取自定义属性的值
                    let className = currentEle.getAttribute('data-ani');
                    let classNameLeave = currentEle.getAttribute('data-leave');
                    // 判断 元素高度是否小于 屏幕高度  -100  并且 高度 大于0  往上滚动 就是负数了 负数也是不可见区域
                    if (currentEleTop < windowHeight - 100 && currentEleTop >=0) {
                        // console.log('元素出现在可视区域');
                        // 元素是否有执行动画的类名
                     let hasClassName = currentEle.classList.contains(className)
                     // 元素是否有离开动画的类名
                     let hasClassLeaveName = currentEle.classList.contains(classNameLeave)
                     // 如果有类名 移除 离开动画的类名
                     if(hasClassLeaveName){
                        currentEle.classList.remove(classNameLeave)
                     }
                     // 没有类名就加上 执行动画的类名
                     if(!hasClassName){
                        currentEle.classList.add(className)
                     }
                    
                    } else {
                        // console.log('元素没有在可视区域');
                        let hasClassName = currentEle.classList.contains(className)
                        if(hasClassName){
                            currentEle.classList.remove(className)
                            currentEle.classList.add(classNameLeave)
                        }
                    }

                }
            })

        }

    mounted() {
        this.$nextTick(() => {
            window.addEventListener('scroll', (e) => {
                this.showEleFn()
            })
            window.onload = () => {
                this.showEleFn()
            }
        })
    },

<img src="./images/page1/page1-3-img1.PNG" data-ani="animate__fadeIn" data-leave="animate__fadeOut" class="img-1 item animate__animated" alt="">
					<img src="./images/page1/page1-3-img2.png?v=1.0.0" data-ani="animate__fadeIn" data-leave="animate__fadeOut" class="img-2 item animate__animated" alt="">
					<img src="./images/page1/page1-3-1.png" alt="" data-ani="animate__fadeInRight" data-leave="animate__fadeOutRight" class="text-1 item animate__animated">
					<img src="./images/page1/page1-3-2.png" alt="" data-ani="animate__fadeInRight" data-leave="animate__fadeOutRight" class="text-2 item animate__animated">
					<img src="./images/page1/page1-3-3.png" alt="" data-ani="animate__fadeIn" data-leave="animate__fadeOut" class="text-3 item animate__animated">
					<img src="./images/page1/page1-3-4.png" alt="" data-ani="animate__fadeInLeft" data-leave="animate__fadeOutLeft" class="text-4 item animate__animated">