当插槽中的数据在NUXT3/VUE3上更改时，如何使用过渡

Question

我似乎无法将我的应用程序在路由更改上过渡，因为我使用的是默认布局，并且每个路线都是相同的。我希望插槽中的内容随着路线的变化而过渡，而不必重新加载/过渡。

布局/default.vue

<template>
    <div class="bg-darkSecondary dark:bg-black h-screen">
        <teleport to="body">
            <transition name="modal-fade">
                <div v-if="uiStore.functionLoading" class="modal-backdrop">
                    <UiBaseSpinner></UiBaseSpinner>
                </div>
            </transition>
        </teleport>
        <UiNav class="dark:bg-darkBg dark:text-darkSecondary" />
        <div class="flex dark:bg-black bg-darkSecondary">
            <transition name="sidebar" mode="out-in">
                <UiSideNav v-if="uiStore.sidebar" />
            </transition>
            <transition name="fade" mode="out-in">
                <div
                    v-if="!uiStore.appLoading"
                    class="flex-grow max-w-full max-h-full bg-darkSecondary dark:bg-black trans"
                >
                    <transition name="fade" mode="out-in" appear>
                        <div>
                            <slot />
                        </div>
                    </transition>
                </div>
                <div v-else class="flex flex-grow mt-40 justify-center trans">
                    <UiBaseSpinner />
                </div>
            </transition>
        </div>
        <UiFooter class="fixed bottom-0" />
    </div>
</template>

我专门试图获取以下插槽以每次在其中的数据进行过渡时进行过渡，例如，如果我要更改路由，则插槽中的内容将会更改，但是我无法理解如何应用tranisition，因为从技术上讲什么都没有被删除，如果我没记错的话，插槽只会用不同的数据呈现。

布局/默认值

<transition name="fade" mode="out-in">
    <div v-if="!uiStore.appLoading" class="flex-grow max-w-full max- 
       h-full bg-darkSecondary dark:bg-black trans">
            <transition name="fade" mode="out-in" appear>
                <div>
                    <slot />
                </div>
            </transition>
        </div>
        <div v-else class="flex flex-grow mt-40 justify-center 
         trans">
            <UiBaseSpinner />
        </div>
</transition>

Answer 1

我只是意识到如何做到这

<transition name="fade" mode="out-in" appear>
  <div :key="$route.path">
    <slot />
  </div>
</transition>