uniapp 숨겨진 페이지 애니메이션

// App.vue文件
<template>
    <div>
        <navigation-bar></navigation-bar>
        <router-view></router-view>
    </div>
</template>
<script>
    import navigationBar from 'uni-app-navigation-bar';
    import store from './store';  // 引入Vuex

    navigationBar.use(store);  // 通过use方法启用Vuex

    export default {
        components: {
            navigationBar,
        }
    }
</script>

// HiddenPage.vue文件
<template>
    <div>
        <navigation-bar :back="true"></navigation-bar>
        <div class="hidden-page-container" @click="hiddenPage">
            <div class="hidden-page-content">我是隐藏页面，在这里可以放些内容</div>
        </div>
    </div>
</template>
<script>
    import { mapState, mapMutations } from 'vuex';

    export default {
        data() {
            return {
                hidden: false,  // 默认显示状态
            }
        },

        computed: mapState({
            hiddenPageState: state => state.hiddenPage.isShow
        }),

        methods: {
            ...mapMutations({
                setHidden: 'hiddenPage/setHidden',
            }),

            onLoad() {
                // 初始化组件状态
                this.hidden = false;
                this.setHidden(false);
            },

            onShow() {
                // 判断状态，进行页面跳转和隐藏
                if (this.hiddenPageState) {
                    uni.navigateTo({ url: '/pages/hiddenPage/hiddenPage' });
                    this.setHidden(false);
                } else {
                    this.hidden = true;
                }
            },

            hiddenPage() {
                // 点击事件，实现页面的隐藏和跳转
                this.hidden = true;
                this.setHidden(true);
                setTimeout(() => {
                    uni.navigateTo({ url: '/pages/hiddenPage/hiddenPage' });
                    this.setHidden(false);
                }, 300);
            }
        }
    }
</script>
<style>
    /* 样式部分 */
    .hidden-page-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        opacity: 1;
        transition: all 0.3s;
    }
    .hidden-page-container.hidden {
        opacity: 0;
    }
    .hidden-page-content {
        width: 80%;
        height: 80%;
        background-color: #fff;
        border-radius: 10px;
        padding: 20px;
        font-size: 16px;
        text-align: center;
    }
</style>