I’m trying to increase and decrease z-index
on button click. For example, I need to increase z-index
on the div when I go to the next page (class turn
with animation adds), and decrease z-index
when I go to prev page (class turn
removes):
// ViewBook.vue - template
<div
class="book__page book__page--right"
:class="{ turn: pageStates.page3 }"
:style="calcZIndex('page3')">
<ViewSomeContact :togglePageState="togglePageState" />
</div>
//...(more pages following)
What I tried to do:
// ViewBook.vue - script
const pageStates = ref({
page3: false,
page2: false,
page1: false,
});
const calcZIndex = page => {
const index = Object.keys(pageStates.value).findIndex(p => p === page);
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];
};
And then I just provide the calcZIndex
, inject in the button component and call it on button click. But it seems like it doesn’t work as intended:
// ItemTurnBtn.vue - template
<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();
};
</script>
I’m looking for a possible solution. Let me know if you find a way to do it.