向下滚动屏幕，列表一条一条以动画形式出现

<script src="libs/vue.js"></script>//引入vue文件
<link rel="stylesheet" href="libs/element/index.css">//引入elementUI样式
<script src="libs/element/index.js"></script>//引入elementui的js文件
<script src="libs/jquery-3.6.0.min.js"></script>//引入jquery文件
<style>
			.test1-enter-active {
				animation: test1-play 2s;
			}
			@keyframes test1-play {
				0% {
					/*transform: scale(0);*/
					margin-top: 50px;
				}
				100% {
					/*transform: scale(1);*/
					margin-top: 5px;
				}
			}
		</style>

<div id="app">
    <el-container>
        <el-header>
            <el-row type="flex" class="row-bg" justify="center" style="border: 1px solid blue;">
                <div>
                    <h1>头部</h1>
                </div>
            </el-row>
        </el-header>
        <el-main>
            <el-row>
                <div style="border: 1px solid red;height: 700px">
                    <div style="text-align: center">
                        <h1>哈哈,这是满格第一屏</h1>
                    </div>
                </div>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top: 20px">
                <el-col :span="20">
                    <div style="border: 1px solid red;height: 500px">
                        哈哈,这是第二屏
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center" style="margin-top: 20px">
                <el-col :span="18">
                    <transition-group name="test1" tag="p" id="item2">
                        <div style="width: 100%; height: 100px;border: 1px solid blue; margin-top:5px;" v-for="item in items2" v-bind:key="item.id">
                            {{ item.text }}123
                        </div>
                    </transition-group>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <el-row type="flex" justify="center" style="margin-top: 20px">
                底部内容
            </el-row>
        </el-footer>
    </el-container>
</div>

new Vue({
				el: '#app',
				data: {
					items: [],
					isShow: false,
					item1Play: false, // 存储item1是否已播放动画
					items2: [],
					items2Data: [{
							id: '1',
							text: 'aaaaa'
						},
						{
							id: '2',
							text: 'bbbbb'
						},
						{
							id: '3',
							text: 'ccccc'
						},
						{
							id: '4',
							text: 'ddddd'
						},
						{
							id: '5',
							text: 'eeeee'
						},
						{
							id: '6',
							text: 'fffff'
						},
						{
							id: '7',
							text: 'ggggg'
						},
						{
							id: '8',
							text: 'wwwww'
						},
					]
				},
				created() {
					// this.listenerScroll();
					/**
					 * 监听滚动条 逻辑根据自己需求来哦
					 */

					window.onscroll = () => {
						this.scroll();
					}
				},
				methods: {
					/**
					 * 获取滚动条位置
					 */
					getScrollTop() {
						let scrollPos;
						// 如果页面相对于左上角有移动，那么就给scrollPos赋值为移动的高度，pageYOffset为相对于页面左上角，垂直方向滚动的像素
						if (window.pageYOffset) {
							scrollPos = window.pageYOffset;
						} else if (document.compatMode && document.compatMode != 'BackCompat') {
							scrollPos = document.documentElement.scrollTop;
						} else if (document.body) {
							scrollPos = document.body.scrollTop;
						}
						return scrollPos;
					},

					scroll() {
						let scrollPos = this.getScrollTop();
						console.log("scrollPos：", scrollPos);
						if (scrollPos == 0) {
							// alert("页面已到顶部")
						}
						this.listenerScroll1(scrollPos);
					},
					listenerScroll(scrollPos) {
						// item1距离顶部的高度
						let item1TopHeight = $("#item1").offset().top;
						// 当前屏幕可视高度
						let lookHeight = $(window).height();
						// 如果当前屏幕滚动条高度+屏幕可视高度>item1距离顶部的高度时,则item1进入屏幕
						if ((scrollPos + lookHeight) > item1TopHeight) {
							console.log('进来屏幕了');
							this.item1Play = true;
						}
					},
					listenerScroll1(scrollPos) {
						// item2距离顶部的高度
						let item2TopHeight = $("#item2").offset().top;
						// item2的div高度
						let item2Height = $("#item2").height();
						// 当前屏幕可视高度
						let lookHeight = $(window).height();

						// 如果当前屏幕滚动条高度+屏幕可视高度>item2距离顶部的高度+item2本身div高度时,则item2滚动到底部
						if ((scrollPos + lookHeight) > item2TopHeight + item2Height) {
							console.log('滚动到item2的底部了');
							this.appendItem2();
						}
					},
					appendItem2() {
						if (this.items2.length < this.items2Data.length) {
							this.items2.push(this.items2Data[this.items2.length])
						}
					},
				}
			})