vue网页滚动到一定程度出现动画效果

script代码（不推荐：不适配）

 data() {

        return {

            toShow3:false,

        };

    }

mounted() {
        window.addEventListener('scroll', this.handleScrollx, true);
    },
    methods: {
        handleScrollx() {
            const currentHeight = window.pageYOffset;
            // Container部分
            console.log(currentHeight);
            if (!this.toShow1 && currentHeight >= 780) {
                console.log('780显示');
                this.toShow1 = true;
            }
            // BehaviorWatch部分
            if (!this.toShow2 && currentHeight >= 1900) {
                console.log('1900显示');
                this.toShow2 = true;
            }
            // Advantage部分
            if (!this.toShow3 && currentHeight >= 3030) {
                console.log('3030显示');
                this.toShow3 = true;
            }
        }
        
    }

script代码（推荐，可自动监测屏幕高宽分辨率的变化）

<script>
export default {
    name: 'behaviorWatch',
    data() {
        return {
            toShow2: false,
            scale_1: 0
        };
    },
    mounted() {
        this.isElView();
        window.addEventListener('scroll', this.isElView, true);
        window.addEventListener('scroll', this.scaleScroll, true);
    },
    destroyed() {
        window.removeEventListener('scroll', this.isElView, true);
        window.removeEventListener('scroll', this.scaleScroll, true);
    },
    methods: {
        // 页面滚动时显示文字动画
        isElView() {
            const el = this.$refs.behaviorWatch;
            var top = el.getBoundingClientRect().top; // 元素顶端到可见区域顶端的距离
            // console.log('top',top);
            var se = document.documentElement.clientHeight; // 浏览器可见区域高度。
            // console.log('se', se);
            if (!this.toShow2 && top < se) {
                this.toShow2 = true;
            }
        },
        // 页面滚动到指定位置图片缩放
        scaleScroll() {
            const el = this.$refs.behaviorWatch;
            var top = el.getBoundingClientRect().top; // 元素顶端到可见区域顶端的距离
            // console.log('top',top);
            var bottom = el.getBoundingClientRect().bottom; // 元素底部端到可见区域顶端的距离
            // console.log('bottom', bottom);
            var se = document.documentElement.clientHeight; // 浏览器可见区域高度。
            // console.log('se', se);
            if (top < se && bottom > se) {
                this.scale_1 = 1;
            } else {
                this.scale_1 = 0;
            }
        }
    }
};
</script>

页面滚动时显示文字动画css代码

  .txt {
          // 当网页滚动到一定高度文字显现的动画效果
            @keyframes textAnimation {
                0% {
                    opacity: 0;
                }
                25% {
                    opacity: 0.5;
                }
                50% {
                    opacity: 0.8;
                }
                100% {
                    transform: translateY(-10%);
                    opacity: 1;
                }
            }

        .text1 {
            font-weight: bold;
            color: #4e4e4e;
            font-size: 48px;
            // opacity: 0;
            animation: textAnimation 2s ease-out  forwards;
        }

页面滚动到指定位置图片缩放css代码

 .scale-1 {
        transform: scale(1.05);
        transition: all 0.5s;
    }
    .scale-0 {
        transform: scale(1);
        transition: all 0.5s;
    }

html代码

<template>

    <!-- 学生上网  行为监测模块 -->

    <div class="BehaviorWatch" ref="behaviorWatch">

        <div class="main" :class="scale_1 == 1 ? 'scale-1' : 'scale-0'">

            <div class="mark">

                <div class="animation" v-show="toShow2">

                    <div class="txt">

                        <div class="online">

                            <div class="line"></div>

                            <p class="text1">学生上网 行为监控</p>

                        </div>

                        <p class="text2">把控游戏时长&nbsp;|&nbsp;自动阻断不良网站&nbsp;|&nbsp;深夜上网提醒</p>

                        <p class="text2">学习及归家提醒&nbsp;|&nbsp;线上支付提醒&nbsp;|&nbsp;深度上网守护报告</p>

                    </div>

                    <div class="img">

                        <img src="@/assets/image/home/phone1.png" alt="phone1" />

                        <img src="@/assets/image/home/phone.png" alt="phone" />

                    </div>

                </div>

            </div>

        </div>

    </div>

</template>