feat: vue新增路由过渡动画 (#199)

opentiny · Sep 4, 2024 · 8b1e86d · 8b1e86d
1 parent 752e32c
commit 8b1e86d
Show file tree

Hide file tree

Showing 24 changed files with 838 additions and 581 deletions.
diff --git a/packages/toolkits/pro/template/tinyvue/src/components/index.ts b/packages/toolkits/pro/template/tinyvue/src/components/index.ts
@@ -1,8 +1,16 @@
 import { App } from 'vue';
 import Breadcrumb from './breadcrumb/index.vue';
+import TransitionFadeDownGroup from './transition/transition-fade-down-group.vue';
+import TransitionFadeDown from './transition/transition-fade-down.vue';
+import TransitionFadeSlideGroup from './transition/transition-fade-slide-group.vue';
+import TransitionFadeSlide from './transition/transition-fade-slide.vue';
 
 export default {
   install(Vue: App) {
     Vue.component('Breadcrumb', Breadcrumb);
+    Vue.component('TransitionFadeDownGroup', TransitionFadeDownGroup);
+    Vue.component('TransitionFadeDown', TransitionFadeDown);
+    Vue.component('TransitionSlideGroup', TransitionFadeSlideGroup);
+    Vue.component('TransitionSlide', TransitionFadeSlide);
   },
 };
diff --git a/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue b/packages/toolkits/pro/template/tinyvue/src/components/menu/index.vue
@@ -8,6 +8,7 @@
       wrap
       :default-expanded-keys="expandeArr"
       only-check-children
+      check-strictly
       @current-change="currentChange"
     >
       <template #default="slotScope">
@@ -116,7 +117,6 @@
     }
     return -1;
   };
-
   const tree = ref();
   const expandeArr = ref<(string | number)[]>([]);
   const tabStore = useTabStore();
@@ -125,10 +125,11 @@
       () => tabStore.current,
       () => {
         const key = findId(tabStore.current.name, tabStore.current.link);
-        if (!expandeArr.value.includes(key)) {
-          expandeArr.value.push(key);
-        }
         tree.value.setCurrentKey(key);
+        const { parentId = null } = tree.value.getCurrentNode();
+        if (parentId) {
+          expandeArr.value = expandeArr.value.concat(parentId);
+        }
       },
       { deep: true, immediate: true },
     );

diff --git a/...es/toolkits/pro/template/tinyvue/src/components/transition/transition-fade-down-group.vue b/...es/toolkits/pro/template/tinyvue/src/components/transition/transition-fade-down-group.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+  import { findIdx } from './utils';
+
+  let count = 0;
+  const onBeforeEnter = (el: HTMLElement) => {
+    el.style.opacity = '0';
+    el.style.transform = 'translateY(-20px)';
+    el.style.transition = 'all 300ms ease-in-out';
+    count += 1;
+  };
+
+  const onEnter = (el: HTMLElement, done: () => void) => {
+    const delay = Math.min(findIdx(el) * 150, 500);
+    setTimeout(() => {
+      el.style.transform = 'translateY(0px)';
+      el.style.opacity = '1';
+      el.addEventListener('transitionend', done);
+    }, delay);
+  };
+</script>
+
+<template>
+  <transition-group
+    name="fade-slide-top-bottom"
+    appear
+    @before-appear="onBeforeEnter"
+    @appear="onEnter"
+  >
+    <slot />
+  </transition-group>
+</template>
+
+<style lang="less">
+  .fade-slide-top-bottom-enter-active {
+    transition: all 300ms ease-out;
+  }
+
+  .fade-slide-top-bottom-leave-active {
+    transition: all 300ms ease-out;
+  }
+
+  .fade-slide-top-bottom-enter-from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+
+  .fade-slide-top-bottom-leave-to {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+</style>
diff --git a/packages/toolkits/pro/template/tinyvue/src/components/transition/transition-fade-down.vue b/packages/toolkits/pro/template/tinyvue/src/components/transition/transition-fade-down.vue
@@ -0,0 +1,25 @@
+<template>
+  <transition name="fade-slide-top-bottom" appear>
+    <slot />
+  </transition>
+</template>
+
+<style lang="less">
+  .fade-slide-top-bottom-enter-active {
+    transition: all 300ms ease-out;
+  }
+
+  .fade-slide-top-bottom-leave-active {
+    transition: all 300ms ease-out;
+  }
+
+  .fade-slide-top-bottom-enter-from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+
+  .fade-slide-top-bottom-leave-to {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+</style>
diff --git a/...s/toolkits/pro/template/tinyvue/src/components/transition/transition-fade-slide-group.vue b/...s/toolkits/pro/template/tinyvue/src/components/transition/transition-fade-slide-group.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+  import { findIdx } from './utils';
+
+  let count = 0;
+  const onBeforeEnter = (el: HTMLElement) => {
+    el.style.opacity = '0';
+    el.style.transform = 'translateX(-20px)';
+    el.style.transition = 'all 300ms ease-in-out';
+    count += 1;
+  };
+
+  const onEnter = (el: HTMLElement, done: () => void) => {
+    const delay = findIdx(el) * 150;
+    setTimeout(() => {
+      el.style.transform = 'translateX(0px)';
+      el.style.opacity = '1';
+      el.addEventListener('transitionend', done);
+    }, delay);
+  };
+</script>
+
+<template>
+  <transition-group
+    name="left-slide-fade"
+    appear
+    @appear="onEnter"
+    @before-appear="onBeforeEnter"
+  >
+    <slot />
+  </transition-group>
+</template>
diff --git a/packages/toolkits/pro/template/tinyvue/src/components/transition/transition-fade-slide.vue b/packages/toolkits/pro/template/tinyvue/src/components/transition/transition-fade-slide.vue
@@ -0,0 +1,25 @@
+<template>
+  <transition name="left-slide-fade" appear>
+    <slot />
+  </transition>
+</template>
+
+<style lang="less">
+  .left-slide-fade-enter-active {
+    transition: all 300ms ease-out;
+  }
+
+  .left-slide-fade-leave-active {
+    transition: all 300ms ease-out;
+  }
+
+  .left-slide-fade-enter-from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+
+  .left-slide-fade-leave-to {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+</style>
diff --git a/packages/toolkits/pro/template/tinyvue/src/components/transition/utils.ts b/packages/toolkits/pro/template/tinyvue/src/components/transition/utils.ts
@@ -0,0 +1,9 @@
+export const findIdx = (el: Element) => {
+  let idx = 0;
+  let cur = el;
+  while (cur) {
+    idx += 1;
+    cur = cur.previousElementSibling;
+  }
+  return idx;
+};
diff --git a/packages/toolkits/pro/template/tinyvue/src/layout/page-layout.vue b/packages/toolkits/pro/template/tinyvue/src/layout/page-layout.vue
@@ -1,9 +1,13 @@
 <template>
   <router-view v-slot="{ Component, route }">
-    <component :is="Component" :key="route.fullPath" />
+    <transition-fade-slide mode="out-in" appear>
+      <component :is="Component" :key="route.fullPath" />
+    </transition-fade-slide>
   </router-view>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import transitionFadeSlide from '@/components/transition/transition-fade-slide.vue';
+</script>
 
 <style scoped lang="less"></style>
diff --git a/packages/toolkits/pro/template/tinyvue/src/views/board/home/index.vue b/packages/toolkits/pro/template/tinyvue/src/views/board/home/index.vue
@@ -12,6 +12,7 @@
 </template>
 
 <script lang="ts" setup>
+  import transitionFadeDownGroup from '@/components/transition/transition-fade-down-group.vue';
   import Main from './components/main.vue';
   import Curve from './components/curve.vue';
   import Falls from './components/falls.vue';

diff --git a/packages/toolkits/pro/template/tinyvue/src/views/board/work/components/learn-coach.vue b/packages/toolkits/pro/template/tinyvue/src/views/board/work/components/learn-coach.vue
@@ -1,52 +1,56 @@
 <template>
   <div class="coach-select">
-    <h3>{{ $t('work.index.coach') }}</h3>
-    <tiny-select
-      v-model="state.project"
-      :placeholder="$t('baseForm.form.label.placeholder')"
-      filterable
-    >
-      <tiny-option
-        v-for="item in state.options"
-        :key="item.value"
-        :label="$t(item.label)"
-        :value="item.value"
-      ></tiny-option>
-    </tiny-select>
+    <transition-fade-down-group>
+      <h3>{{ $t('work.index.coach') }}</h3>
+      <tiny-select
+        v-model="state.project"
+        :placeholder="$t('baseForm.form.label.placeholder')"
+        filterable
+      >
+        <tiny-option
+          v-for="item in state.options"
+          :key="item.value"
+          :label="$t(item.label)"
+          :value="item.value"
+        ></tiny-option>
+      </tiny-select>
+    </transition-fade-down-group>
   </div>
   <div>
     <tiny-layout>
       <tiny-row :flex="true" justify="center">
-        <tiny-col :span="8">
-          <div class="col">
-            <div class="left">
-              <div class="left-content">
-                <span class="num">{{ number[0] }}</span>
-                <span>&nbsp;/ {{ $t('work.index.Person') }}</span>
+        <transition-fade-slide-group>
+          <tiny-col :span="8">
+            <div class="col">
+              <div class="left">
+                <div class="left-content">
+                  <span class="num">{{ number[0] }}</span>
+                  <span>&nbsp;/ {{ $t('work.index.Person') }}</span>
+                </div>
+                <div class="left-title">{{ $t('work.index.trainees') }}</div>
               </div>
-              <div class="left-title">{{ $t('work.index.trainees') }}</div>
-            </div>
-            <div class="divider"></div>
-            <div class="right">
-              <img src="@/assets/images/coach-1.png" />
-            </div>
-          </div>
-        </tiny-col>
-        <tiny-col :span="8">
-          <div class="col">
-            <div class="left">
-              <div class="left-content">
-                <span class="num">{{ number[1] }}</span>
-                <span>&nbsp;/ {{ $t('work.index.Person') }}</span>
+              <div class="divider"></div>
+              <div class="right">
+                <img src="@/assets/images/coach-1.png" />
               </div>
-              <div class="left-title">{{ $t('work.index.coachNum') }}</div>
             </div>
-            <div class="divider"></div>
-            <div class="right">
-              <img src="@/assets/images/coach-2.png" />
+          </tiny-col>
+          <tiny-col :span="8">
+            <div class="col">
+              <div class="left">
+                <div class="left-content">
+                  <span class="num">{{ number[1] }}</span>
+                  <span>&nbsp;/ {{ $t('work.index.Person') }}</span>
+                </div>
+                <div class="left-title">{{ $t('work.index.coachNum') }}</div>
+              </div>
+              <div class="divider"></div>
+              <div class="right">
+                <img src="@/assets/images/coach-2.png" />
+              </div>
             </div>
-          </div>
-        </tiny-col>
+          </tiny-col>
+        </transition-fade-slide-group>
       </tiny-row>
     </tiny-layout>
   </div>
@@ -63,6 +67,7 @@
   } from '@opentiny/vue';
   import { reactive, onMounted, watch, ref } from 'vue';
   import { getUserData, getUserChange } from '@/api/board';
+  import transitionFadeSlideGroup from '@/components/transition/transition-fade-slide-group.vue';
 
   // 加载效果
   const state = reactive<{
@@ -108,7 +113,7 @@
     (newValue, oldValue) => {
       fetchSelect(newValue.project);
     },
-    { immediate: true }
+    { immediate: true },
   );
 </script>
 
@@ -131,7 +136,9 @@
     color: #575d6c;
     font-weight: 600;
     font-size: 30px;
-    font-family: PingFang SC, PingFang SC-PingFang SC;
+    font-family:
+      PingFang SC,
+      PingFang SC-PingFang SC;
     line-height: 36px;
     text-align: left;
   }