fix(transition): fix transition not work

vben

2021-01-04 a7a8b894c1062d8eb05a094fdbb7887044d0d973

fix(transition): fix transition not work

 src/components/Loading/index.ts

@@ -1,5 +1,8 @@
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
export const Loading = createAsyncComponent(() => import('./src/index.vue'));
// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
// export const Loading = createAsyncComponent(() => import('./src/index.vue'));

import Loading from './src/index.vue';

export { Loading };
export { useLoading } from './src/useLoading';
export { createLoading } from './src/createLoading';

 src/components/Table/src/hooks/useTable.ts

@@ -42,6 +42,7 @@
      },
      {
        immediate: true,
        deep: true,
      }
    );
  }

 src/layouts/default/content/index.vue

@@ -28,7 +28,6 @@
      const { prefixCls } = useDesign('layout-content');
      const { getOpenPageLoading } = useTransitionSetting();
      const { getLayoutContentMode, getPageLoading } = useRootSetting();

      return {
        prefixCls,
        getOpenPageLoading,

 src/layouts/iframe/index.vue

@@ -1,5 +1,5 @@
<template>
  <div>
  <div v-if="showFrame">
    <template v-for="frame in getFramePages" :key="frame.path">
      <FramePage
        v-if="frame.meta.frameSrc && hasRenderFrame(frame.name)"
@@ -10,7 +10,7 @@
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { defineComponent, unref, computed } from 'vue';
  import FramePage from '/@/views/sys/iframe/index.vue';

  import { useFrameKeepAlive } from './useFrameKeepAlive';
@@ -19,7 +19,13 @@
    name: 'FrameLayout',
    components: { FramePage },
    setup() {
      return { ...useFrameKeepAlive() };
      const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();

      const showFrame = computed(() => {
        return unref(getFramePages).length > 0;
      });

      return { getFramePages, hasRenderFrame, showIframe, showFrame };
    },
  });
</script>

 src/layouts/page/ParentView.vue

@@ -5,10 +5,24 @@
  <div>
    <router-view>
      <template v-slot="{ Component, route }">
        <keep-alive v-if="openCache" :include="getCaches">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
        <component v-else :is="Component" :key="route.fullPath" />
        <transition
          :name="
            getTransitionName({
              route,
              openCache: openCache,
              enableTransition: getEnableTransition,
              cacheTabs: getCaches,
              def: getBasicTransition,
            })
          "
          mode="out-in"
          appear
        >
          <keep-alive v-if="openCache" :include="getCaches">
            <component :is="Component" :key="route.fullPath" />
          </keep-alive>
          <component v-else :is="Component" :key="route.fullPath" />
        </transition>
      </template>
    </router-view>
  </div>
@@ -21,6 +35,7 @@

  import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
  import { useCache } from './useCache';
  import { getTransitionName } from './transition';

  export default defineComponent({
    parentView: true,
@@ -40,6 +55,7 @@
        getBasicTransition,
        openCache,
        getEnableTransition,
        getTransitionName,
      };
    },
  });

 src/layouts/page/index.tsx

@@ -1,4 +1,5 @@
import type { FunctionalComponent } from 'vue';
import type { DefaultContext } from './transition';

import { computed, defineComponent, unref, Transition, KeepAlive } from 'vue';
import { RouterView, RouteLocation } from 'vue-router';
@@ -10,6 +11,7 @@
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { useCache } from './useCache';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { getTransitionName } from './transition';
// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

interface DefaultContext {
@@ -32,17 +34,20 @@

    return () => {
      return (
        <div>
        <>
          <RouterView>
            {{
              default: ({ Component, route }: DefaultContext) => {
                // No longer show animations that are already in the tab
                const cacheTabs = unref(getCaches);
                const isInCache = cacheTabs.includes(route.name as string);
                const name =
                  isInCache && route.meta.loaded && unref(getEnableTransition)
                    ? 'fade-slide'
                    : null;

                const name = getTransitionName({
                  route,
                  openCache: unref(openCache),
                  enableTransition: unref(getEnableTransition),
                  cacheTabs,
                  def: unref(getBasicTransition),
                });

                // When the child element is the parentView, adding the key will cause the component to be executed multiple times. When it is not parentView, you need to add a key, because it needs to be compatible with the same route carrying different parameters
                const isParentView = Component?.type.parentView;
@@ -60,11 +65,7 @@
                  return PageContent;
                }
                return (
                  <Transition
                    name={name || route.meta.transitionName || unref(getBasicTransition)}
                    mode="out-in"
                    appear={true}
                  >
                  <Transition name={name} mode="out-in" appear={true}>
                    {() => PageContent}
                  </Transition>
                );
@@ -72,7 +73,7 @@
            }}
          </RouterView>
          {unref(getCanEmbedIFramePage) && <FrameLayout />}
        </div>
        </>
      );
    };
  },

 src/layouts/page/transition.ts

New file
@@ -0,0 +1,29 @@
import type { FunctionalComponent } from 'vue';
import type { RouteLocation } from 'vue-router';

export interface DefaultContext {
  Component: FunctionalComponent & { type: Indexable };
  route: RouteLocation;
}

export function getTransitionName({
  route,
  openCache,
  cacheTabs,
  enableTransition,
  def,
}: Pick<DefaultContext, 'route'> & {
  enableTransition: boolean;
  openCache: boolean;
  def: string;
  cacheTabs: string[];
}) {
  const isInCache = cacheTabs.includes(route.name as string);
  const transitionName = 'fade-slide';
  let name: string | null = transitionName;

  if (openCache) {
    name = isInCache && route.meta.loaded && enableTransition ? transitionName : null;
  }
  return name || route.meta.transitionName || def;
}

 src/router/guard/index.ts

@@ -11,11 +11,11 @@

export function createGuard(router: Router) {
  createPageGuard(router);
  createPageLoadingGuard(router);
  createHttpGuard(router);
  createScrollGuard(router);
  createMessageGuard(router);
  createTitleGuard(router);
  createPageLoadingGuard(router);
  createProgressGuard(router);
  createPermissionGuard(router);
}