perf: 优化页面细节上的过渡效果

pengzhanbo · Feb 4, 2024 · 526e8d1 · 526e8d1
1 parent 42bf148
commit 526e8d1
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 39 deletions.
diff --git a/theme/src/client/components/Flyout/MenuGroup.vue b/theme/src/client/components/Flyout/MenuGroup.vue
@@ -26,6 +26,7 @@ defineProps<{
   padding: 12px 12px 0;
   margin: 12px -12px 0;
   border-top: 1px solid var(--vp-c-divider);
+  transition: border-top var(--t-color);
 }
 
 .menu-group:first-child {
@@ -45,6 +46,6 @@ defineProps<{
   font-weight: 600;
   line-height: 32px;
   color: var(--vp-c-text-2);
-  transition: color 0.25s;
+  transition: color var(--t-color);
 }
 </style>
diff --git a/theme/src/client/components/Flyout/MenuLink.vue b/theme/src/client/components/Flyout/MenuLink.vue
@@ -33,6 +33,7 @@ const page = usePageData()
   padding: 12px 12px 0;
   margin: 12px -12px 0;
   border-top: 1px solid var(--vp-c-divider);
+  transition: border-top var(--t-color);
 }
 
 .link {
@@ -45,8 +46,8 @@ const page = usePageData()
   white-space: nowrap;
   border-radius: 6px;
   transition:
-    background-color 0.25s,
-    color 0.25s;
+    background-color var(--t-color),
+    color var(--t-color);
 }
 
 .link:hover {

diff --git a/theme/src/client/components/Flyout/VMenu.vue b/theme/src/client/components/Flyout/VMenu.vue
@@ -35,7 +35,7 @@ defineProps<{
   border: 1px solid var(--vp-c-divider);
   border-radius: 12px;
   box-shadow: var(--vp-shadow-3);
-  transition: background-color 0.5s;
+  transition: background-color var(--t-color), border var(--t-color);
 }
 
 .menu-wrapper :deep(.group) {
@@ -46,6 +46,7 @@ defineProps<{
 .menu-wrapper :deep(.group + .group) {
   padding: 11px 12px 12px;
   border-top: 1px solid var(--vp-c-divider);
+  transition: border-top var(--t-color);
 }
 
 .menu-wrapper :deep(.group:last-child) {
@@ -55,6 +56,7 @@ defineProps<{
 .menu-wrapper :deep(.group + .item) {
   padding: 11px 16px 0;
   border-top: 1px solid var(--vp-c-divider);
+  transition: border-top var(--t-color);
 }
 
 .menu-wrapper :deep(.item) {
@@ -68,7 +70,7 @@ defineProps<{
   font-weight: 500;
   line-height: 28px;
   color: var(--vp-c-text-2);
-  transition: color 0.5s;
+  transition: color var(--t-color);
 }
 
 .menu-wrapper :deep(.action) {

diff --git a/theme/src/client/components/Flyout/index.vue b/theme/src/client/components/Flyout/index.vue
@@ -66,7 +66,7 @@ export default {
 <style scoped>
 .flyout-wrapper {
   position: relative;
-  transition: color 0.25s;
+  transition: color var(--t-color);
 }
 
 .text {
@@ -76,14 +76,14 @@ export default {
   font-weight: 500;
   line-height: normal;
   color: var(--vp-c-text-1);
-  transition: color 0.25s;
+  transition: color var(--t-color);
 }
 
 .icon {
   width: 20px;
   height: 20px;
   fill: currentcolor;
-  transition: fill 0.25s;
+  transition: fill var(--t-color);
 }
 
 .menu {
@@ -131,7 +131,7 @@ export default {
   height: var(--vp-nav-height);
   padding: 0 10px;
   color: var(--vp-c-text-1);
-  transition: color 0.5s;
+  transition: color var(--t-color);
 }
 
 .option-icon {

diff --git a/theme/src/client/components/Nav/index.vue b/theme/src/client/components/Nav/index.vue
@@ -36,7 +36,6 @@ provide('close-screen', closeScreen)
   z-index: var(--vp-z-index-nav);
   width: 100%;
   pointer-events: none;
-  transition: background-color 0.5s;
 }
 
 .nav-wrapper.fixed {

diff --git a/theme/src/client/components/SocialLink.vue b/theme/src/client/components/SocialLink.vue
@@ -34,12 +34,11 @@ const svg = computed(() => {
   width: 36px;
   height: 36px;
   color: var(--vp-c-text-2);
-  transition: color 0.5s;
+  transition: color var(--t-color);
 }
 
 .social-link:hover {
   color: var(--vp-c-text-1);
-  transition: color 0.25s;
 }
 
 .social-link > :deep(svg) {

diff --git a/theme/src/client/components/SwitchAppearance.vue b/theme/src/client/components/SwitchAppearance.vue
@@ -51,26 +51,8 @@ function useAppearance() {
   }
 
   function setClass(dark: boolean): void {
-    const css = document.createElement('style')
-    css.type = 'text/css'
-    css.appendChild(
-      document.createTextNode(
-        `:not(.switch-appearance):not(.switch-appearance *) {
-  -webkit-transition: none !important;
-  -moz-transition: none !important;
-  -o-transition: none !important;
-  -ms-transition: none !important;
-  transition: none !important;
-}`,
-      ),
-    )
-    document.head.appendChild(css)
-
     checked.value = dark
     classList[dark ? 'add' : 'remove']('dark')
-
-    const _ = window.getComputedStyle(css).opacity
-    document.head.removeChild(css)
   }
 
   return toggle

diff --git a/theme/src/client/components/VButton.vue b/theme/src/client/components/VButton.vue
@@ -56,10 +56,8 @@ function linkTo(e: Event) {
   text-align: center;
   white-space: nowrap;
   border: 1px solid transparent;
-  transition:
-    color 0.25s,
-    border-color 0.25s,
-    background-color 0.25s;
+  transition: var(--t-color);
+  transition-property: border, color, background-color;
 }
 
 .VPButton:active {

diff --git a/theme/src/client/components/VFooter.vue b/theme/src/client/components/VFooter.vue
@@ -42,18 +42,24 @@ onMounted(() => {
 .plume-footer {
   position: relative;
   z-index: var(--vp-z-index-footer);
-  padding: 32px 24px;
+  padding: 24px;
   background-color: var(--vp-c-bg);
   border-top: 1px solid var(--vp-c-gutter);
-  transition: all 0.25s;
+  transition: all var(--t-color);
+}
+
+.plume-footer p {
+  color: var(--vp-c-text-2);
+  transition: color var(--t-color);
 }
 
 .plume-footer :deep(a) {
+  color: var(--vp-c-text-2);
   text-decoration-line: underline;
   text-underline-offset: 2px;
   transition:
-    color,
-    text-underline-offset 0.25s;
+    color var(--t-color),
+    text-underline-offset var(--t-color);
 }
 
 .plume-footer :deep(a:hover) {
@@ -63,7 +69,7 @@ onMounted(() => {
 
 @media (min-width: 768px) {
   .plume-footer {
-    padding: 32px;
+    padding: 24px;
   }
 }
 

diff --git a/theme/src/client/components/global/Badge.vue b/theme/src/client/components/global/Badge.vue
@@ -25,6 +25,8 @@ withDefaults(defineProps<Props>(), {
   line-height: 22px;
   border: 1px solid transparent;
   border-radius: 12px;
+  transition: var(--t-color);
+  transition-property: color, background-color, border-color;
   transform: translateY(-2px);
 }
 

diff --git a/theme/src/client/components/global/ExternalLinkIcon.vue b/theme/src/client/components/global/ExternalLinkIcon.vue
@@ -21,6 +21,7 @@ const show = computed(() => matter.value.externalLink !== false)
   height: 0.8em;
   color: var(--vp-c-text-3);
   vertical-align: middle;
+  transition: color var(--t-color);
 }
 
 @media print {