CODEWITHSUNDEEP
cssvue.jsnativescriptnativescript-vue
Luno
Luno

Reputation: 35

Nativescript Vue v-show with transition

I am struggling with using of v-show with Nativescript. I was trying to make an animation described in https://www.nuvious.com/posts/nativescript-vue-transitions . When using v-show the element does not really disappear from the screen.

Here 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>

As I understand, transition 'bounce' should be executed when v-if or v-show state of the inner element is changed. The problem is that area of the created menu is getting non-responsible, as another element is taking place here. This is obviously caused by z-index, but with v-show is should theoretically disappear from the view and have no effect from z-index.

It is especially interesting that with v-show I can click on the main screen and button from the hidden menu is triggered. The Menu button is getting blocked. In case of v-if, I can see only blocked Menu button.

Alternatively, if remove this z-index, I can see all the element of the StackLayout on the front layer. If I specify z-index of StackLayout, e.g. 2 (lower than the MainMenu), I am still getting an issue that this element is not fully removed from the screen. The following libraries are used:

Android API 26 (also tested with 29 and 30)

Could you please help with an idea how to deal with it and keep correct order of the layers? Obviously, z-index is not the most elegant solution.

Upvotes: 0

Views: 135

Answers (1)

Luno
Luno

Reputation: 35

Finally, it was found that use of Animate.css does not cause any problems that were met with a custom animation. Probably, so far it is the only solution.

Upvotes: 0

Related Questions