Vue3实现点击按钮增减z-index并适配翻页动画的问题求助

需求 #

• 点击下一页：给页面添加turn动画类时，提升该页面的z-index
• 点击上一页：移除turn动画类时，降低该页面的z-index

尝试过的代码 #

ViewBook.vue（模板） #

<div
   class="book__page book__page--right"
   :class="{ turn: pageStates.page3 }"
   :style="calcZIndex('page3')">
   <ViewSomeContact :togglePageState="togglePageState" />
</div>
<!-- ...更多页面 -->

ViewBook.vue（脚本初始版本） #

const pageStates = ref({
    page3: false,
    page2: false,
    page1: false,
});

const calcZIndex = page => {
    const index = Object.keys(pageStates.value).findIndex(p => p === page);
    // 逻辑错误：直接判断整个pageStates对象是否为true
    if (pageStates.value === true) {
        setTimeout(() => {
            return { zIndex: 20 + index };
        }, 500);
    } else {
        setTimeout(() => {
            return { zIndex: 20 - index };
        }, 500);
    }
};

const togglePageState = page => {
    pageStates.value[page] = !pageStates.value[page];
};

ItemTurnBtn.vue #

<template>
    <button class="book__nav-btn" @click="handleButtonClick">
        <slot> </slot>
    </button>
</template>

<script setup>
import { inject } from 'vue';
const calcZIndex = inject('calcZIndex');

const handleButtonClick = () => {
    playSfx();
    calcZIndex(); // 未传入目标page参数
};
</script>

遇到的问题 #

1. 初始版本中devtools看不到z-index生效：calcZIndex用setTimeout异步返回值，Vue的:style无法接收异步结果；同时判断条件pageStates.value === true完全错误，且按钮调用时未传page参数。
2. 更新代码后动画异常：z-index变化时机滞后于动画，导致部分页面翻页过快遮挡，需要延迟500ms调整z-index但不知如何绑定到响应式状态。

可行解决方案 #

步骤1：改用响应式变量存储z-index #

将每个页面的z-index转为响应式变量，通过定时器异步更新，解决异步返回无法绑定的问题：

// ViewBook.vue - script
import { ref, provide } from 'vue';

const pageStates = ref({
    page3: false,
    page2: false,
    page1: false,
});
// 新增：存储每个页面的z-index初始值
const pageZIndexes = ref({
    page3: 20,
    page2: 20,
    page1: 20,
});

const calcZIndex = (page) => {
    const index = Object.keys(pageStates.value).findIndex(p => p === page);
    const isTurned = pageStates.value[page];
    // 根据翻页状态计算目标z-index
    const targetZIndex = isTurned ? (20 + index) : (20 - index);
    // 延迟500ms更新，匹配动画时长
    setTimeout(() => {
        pageZIndexes.value[page] = targetZIndex;
    }, 500);
};

const togglePageState = (page) => {
    // 先切换翻页状态，再触发z-index计算
    pageStates.value[page] = !pageStates.value[page];
    calcZIndex(page);
};

// 提供togglePageState给子组件，而非直接提供calcZIndex
provide('togglePageState', togglePageState);

步骤2：修改模板绑定逻辑 #

把:style直接绑定到响应式的pageZIndexes变量：

<!-- page3示例 -->
<div
   class="book__page book__page--right"
   :class="{ turn: pageStates.page3 }"
   :style="{ zIndex: pageZIndexes.page3 }">
   <ViewSomeContact :togglePageState="togglePageState" />
</div>

<!-- 其他页面同理，比如page2 -->
<div
   class="book__page book__page--right"
   :class="{ turn: pageStates.page2 }"
   :style="{ zIndex: pageZIndexes.page2 }">
   <!-- 页面内容 -->
</div>

步骤3：修复按钮组件的参数传递 #

让按钮组件接收page参数，调用togglePageState时传入：

<!-- ItemTurnBtn.vue -->
<template>
    <button class="book__nav-btn" @click="handleButtonClick">
        <slot> </slot>
    </button>
</template>

<script setup>
import { inject } from 'vue';
const togglePageState = inject('togglePageState');

// 定义props接收当前操作的页面标识
const props = defineProps({
    page: {
        type: String,
        required: true
    }
});

const handleButtonClick = () => {
    playSfx();
    togglePageState(props.page);
};
</script>

步骤4：调整动画时序（可选） #

如果翻页动画时长不是500ms，可修改setTimeout的延迟时间，确保z-index在动画关键节点后变化，避免遮挡问题。

关键问题总结 #

• 异步返回值无法绑定到:style：必须用响应式变量存储z-index，再异步更新变量。
• 初始逻辑判断错误：应判断pageStates.value[page]而非整个对象。
• 缺少必要参数：操作z-index时必须明确目标页面，否则无法计算对应层级。

内容的提问来源于stack exchange，提问作者Michael