Nativescript Vue v-show 带过渡

Question

我正在努力将 v-show 与 Nativescript 一起使用。我试图制作 https://www.nuvious.com/posts/nativescript-vue-transitions 中描述的动画。 使用 v-show 时，元素并没有真正从屏幕上消失。

这是我的代码

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

主菜单.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>

据我了解，当内部元素的 v-if 或 v-show 状态更改时，应该执行转换“bounce”。问题是创建的菜单区域变得不负责任，因为这里发生了另一个元素。这显然是由 z-index 引起的，但使用 v-show 理论上应该从视图中消失，并且不受 z-index 的影响。

特别有趣的是，通过 v-show，我可以单击主屏幕并触发隐藏菜单中的按钮。菜单按钮被阻止。在 v-if 的情况下，我只能看到被阻止的菜单按钮。

或者，如果删除这个 z-index，我可以在前层看到 StackLayout 的所有元素。如果我指定 StackLayout 的 z-index，例如2（低于主菜单），我仍然遇到一个问题，即该元素没有完全从屏幕上删除。 使用以下库：

• “@nativescript/core”：“~8.5.0”，
• “@nativescript/主题”：“~3.0.2”，
• “@nativescript/types”：“^8.5.0”，
• “nativescript-vue”：“~2.9.3”

Android API 26（也使用 29 和 30 进行了测试）

您能帮忙想一下如何处理它并保持正确的图层顺序吗？显然，z-index 不是最优雅的解决方案。

Answer 1

最后，我们发现使用 Animate.css 不会导致自定义动画遇到的任何问题。也许，到目前为止，这是唯一的解决方案。