vue首页首次滚动展示底部划出内容

业务场景，第一次进入网页或者刷新网页时，随着滚动条滚动展示出页面数据，从下往上滚动，依此出现，做了一个记录，需要改善的事每个div需要一个ref,不同时候展示出来。
其实就是用到一个监听窗口滚动条以及每块元素展示，动态简介类名，css滚动。
utils/index.js文件中添加isElementNotInViewport监听滚动条到该位置的问题

export function isElementNotInViewport(el) {
	if (el) {
		let rect = el.getBoundingClientRect();
		return (
			rect.top >=
				(window.innerHeight || document.documentElement.clientHeight) ||
			rect.bottom <= 0
		);
	}
};
export default { isElementNotInViewport}

页面样式

<template>
    <div class="basic-info">
        <div class="cont-form-box ls-animation" ref="header"  :class="{'ls-animationed':header_Animate}">
            <div class="item-title">教育经历</div>
        </div>
    </div>
</template>

<script>

export default {
    data(){
        return{
            header_Animate: false,
        }
    },
   
    mounted() {
        // 监听滚动事件
        window.addEventListener("scroll", this.scrollToTop);
    },
    beforeRouteLeave(to, form, next) {
        // 离开路由移除滚动事件
        window.removeEventListener('scroll',this.scrollToTop);
        next();
    },
   
    methods:{
        // 滚动事件
        scrollToTop() {
            !isElementNotInViewport(this.$refs.header) ? this.header_Animate = true: '';
        },
       
    }
}
</script>

<style lang="less" scoped>
.cont-form-box {
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1000);
    border-radius: 12px;
    padding: 24px;
    padding-bottom: 4px;
    margin-bottom: 20px;
}
@import "./index.less";
.ls-animationed>*{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: visible!important;
    backface-visibility: visible!important;
    -webkit-animation-name: fadeInUp2;
    animation-name: fadeInUp2;
}
.ls-animation>* {
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 0;
}
@keyframes fadeInUp2 {
    0% {
        opacity: 0;
        transform: translate3d(0,50%,0);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}
</style>

如有更好的意见，欢迎讨论。