网站实现单页面滚轮翻页效果

目前流行的首页单页面滚轮翻页效果，完全利用TransitionGroup标签与CSS动效实现，keyframes可根据实际项目需要进行更改替换。

<template>
    <div class="homePages" @wheel="handleWheel" v-if="!mobileStatus">
        <TransitionGroup name="list" tag="ul">
            <Page1 v-if="pageNumber === 1"></Page1>
            <Page2 v-if="pageNumber === 2"></Page2>
            <Page3 v-if="pageNumber === 3"></Page3>
        </TransitionGroup>
    </div>
</template>

// 挂载卸载时分别隐藏现实滚动条
onMounted(() => {
    document.body.style.overflowY = "hidden";
})

onBeforeUnmount(() => {  
    document.body.style.overflowY = "auto";
})


// 监听鼠标滚轮事件
let pageNumber = ref(1);
const handleWheel = tools.throttle(async function (event) { // 应用方法
    if (event.deltaY) {
        if (event.deltaY > 0 && pageNumber.value < 7) {
            pageNumber.value++;
        }
        else if (event.deltaY < 0 && pageNumber.value > 1) {
            pageNumber.value--;
        }

    } else if (event.detail) { // Firefox
        if (event.detail > 0 && pageNumber.value < 7) {
            pageNumber.value++;
            getWindowInfo();
        }
        else if (event.detail < 0 && pageNumber.value > 1) {
            pageNumber.value--;
            getWindowInfo();
        }
    }
})

.homePages {
    min-width: 1400px;
    position: relative;
}

.list-enter-from {
    transform: translate3d(0, -100%, 0);
    opacity: 0.1;
}

.list-enter-active {
    transition: all 0.8s;
}

.list-enter-to {
    opacity: 1;
}

.list-leave-from {
    display: none;
}

.list-leave-active {
    transition: all 0.5s;
}

.list-leave-to {
    display: none;
}