I am facing some issues while using v-show with Nativescript. I attempted to create an animation as outlined in . When using v-show, the element doesn't completely disappear from the screen.
Below is my code:
<template>
<Page actionBarHidden="true">
<GridLayout>
<transition name="bounce">
<MainMenu v-show="menuOpen" class="mainMenu" @menu-closed="toogleMenu" />
</transition>
<StackLayout >
<button text="Menu" @tap="toogleMenu" />
<Label :text="menuOpen" />
</StackLayout>
</GridLayout>
</Page>
</template>
<script scoped>
import MainMenu from './MainMenu.vue'
export default {
components:{ MainMenu },
data() { return { menuOpen: false, } },
methods: {
toogleMenu() { this.menuOpen = !this.menuOpen; },
},
};
</script>
<style scoped>
.bounce-enter-active {
animation-name: bounce-in;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
.bounce-leave-active {
animation-name: bounce-in;
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-direction: reverse;
animation-timing-function: ease-in-out;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
MainMenu.vue
<template>
<AbsoluteLayout class="mainMenu">
<StackLayout class="mainMenuItems">
<Label text="Menu" />
<button text="Close" @tap="closeMenu" />
</StackLayout>
</AbsoluteLayout >
</template>
<script scoped>
export default {
methods: {
closeMenu() { this.$emit("menu-closed"); }
},
};
</script>
<style scoped>
.mainMenu {
width:80%;
left: 0;
right: 0;
top:0;
bottom: 0;
background: lightblue;
z-index: 3;
}
.mainMenuItems {
width:100%;
left: 0;
right: 0;
font-size:20%;
text-align: center;
color:coral;
}
</style>
It seems that the 'bounce' transition should trigger when the v-if or v-show state of the inner element changes. However, the area of the created menu becomes unresponsive, as another element takes its place. This is likely due to the z-index, but with v-show, the element should theoretically disappear from view and not be affected by z-index.
It is noteworthy that I can click on the main screen with v-show and trigger a button from the hidden menu. The Menu button becomes unresponsive. With v-if, I only see the blocked Menu button.
Alternatively, when I remove the z-index, all elements of the StackLayout appear on the front layer. Even if I specify a z-index for the StackLayout, e.g. 2 (lower than the MainMenu), the element still doesn't fully disappear from the screen. The following libraries are being used:
- "@nativescript/core": "~8.5.0",
- "@nativescript/theme": "~3.0.2",
- "@nativescript/types": "^8.5.0",
- "nativescript-vue": "~2.9.3"
Android API 26 (also tested with 29 and 30)
Could you provide suggestions on how to tackle this issue and maintain the correct layer order? Z-index doesn't seem to be the most elegant solution.