feat: 博客相关页面外观切换过渡效果，hover 效果

pengzhanbo · Feb 4, 2024 · a44a6ad · a44a6ad
1 parent 13f7421
commit a44a6ad
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 7 deletions.
diff --git a/theme/src/client/components/Archives.vue b/theme/src/client/components/Archives.vue
@@ -80,13 +80,20 @@ const { archives } = useArchives()
     background-color: var(--vp-c-bg);
     border-bottom: none;
     border-radius: 8px;
+    box-shadow: var(--vp-shadow-1);
+    transition: var(--t-color);
+    transition-property: border-bottom, box-shadow, background-color;
+  }
+
+  .archive:hover {
     box-shadow: var(--vp-shadow-2);
   }
 
   .archive-title {
     padding-bottom: 10px;
     margin-top: 0;
     border-bottom: solid 1px var(--vp-c-divider);
+    transition: border-bottom var(--t-color);
   }
 }
 

diff --git a/theme/src/client/components/BackToTop.vue b/theme/src/client/components/BackToTop.vue
@@ -86,8 +86,8 @@ function handleClick() {
   border-radius: 100%;
   box-shadow: var(--vp-shadow-2);
   transition:
-    background-color 0.25s ease,
-    box-shadow 0.25s ease;
+    background-color var(--t-color),
+    box-shadow var(--t-color);
 }
 
 .back-to-top-button .percent,
@@ -96,7 +96,7 @@ function handleClick() {
   top: 0;
   left: 0;
   opacity: 0;
-  transition: opacity 0.5s ease;
+  transition: opacity 0.5s ease, color var(--t-color);
 }
 
 .back-to-top-button .percent.show,

diff --git a/theme/src/client/components/Backdrop.vue b/theme/src/client/components/Backdrop.vue
@@ -23,7 +23,7 @@ defineProps<{
   left: 0;
   z-index: var(--vp-z-index-backdrop);
   background: var(--vp-backdrop-bg-color);
-  transition: opacity 0.5s;
+  transition: opacity var(--t-color);
 }
 
 .backdrop.fade-enter-from,

diff --git a/theme/src/client/components/Blog.vue b/theme/src/client/components/Blog.vue
@@ -24,6 +24,7 @@ const page = usePageData<PlumeThemePageData>()
 
 <style scoped>
 .blog-wrapper {
+  position: relative;
   min-height: calc(100vh - var(--vp-footer-height, 0px));
 }
 
@@ -45,6 +46,12 @@ const page = usePageData<PlumeThemePageData>()
     padding-top: var(--vp-nav-height);
     margin-top: calc(var(--vp-nav-height) * -1);
     background-color: var(--vp-c-bg-alt);
+    transition: background-color var(--t-color);
+  }
+
+  .blog-container {
+    position: relative;
+    z-index: 2;
   }
 }
 

diff --git a/theme/src/client/components/BlogAside.vue b/theme/src/client/components/BlogAside.vue
@@ -78,7 +78,21 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   margin-bottom: 24px;
   background-color: var(--vp-c-bg);
   border-radius: 8px;
+  box-shadow: var(--vp-shadow-1);
+  transition: var(--t-color);
+  transition-property: background-color, color, box-shadow, transform;
+  transform: scale(1);
+}
+
+.avatar-profile:hover {
   box-shadow: var(--vp-shadow-2);
+  transform: scale(1.002);
+}
+
+.avatar-profile h3,
+.avatar-profile p {
+  color: var(--vp-c-text-1);
+  transition: color var(--t-color);
 }
 
 .avatar-profile .circle img {
@@ -102,8 +116,15 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   color: var(--vp-c-text-1);
   background-color: var(--vp-c-bg);
   border-radius: 8px;
+  box-shadow: var(--vp-shadow-1);
+  transition: var(--t-color);
+  transition-property: background-color, color, box-shadow, transform;
+  transform: scale(1);
+}
+
+.nav-link:hover {
   box-shadow: var(--vp-shadow-2);
-  transition: color var(--t-color);
+  transform: scale(1.002);
 }
 
 .nav-link:hover,
@@ -120,13 +141,15 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
 .nav-link .total {
   padding-right: 8px;
   color: var(--vp-c-text-3);
+  transition: color var(--t-color);
 }
 
 .nav-link .icon {
   width: 1em;
   height: 1em;
   font-size: 1.2em;
   color: var(--vp-c-text-3);
+  transition: color var(--t-color);
 }
 
 .nav-link .icon-logo {

diff --git a/theme/src/client/components/BlogExtract.vue b/theme/src/client/components/BlogExtract.vue
@@ -98,11 +98,14 @@ const showBlogExtract = computed(() => {
   border-top-left-radius: 99px;
   border-bottom-left-radius: 99px;
   box-shadow: var(--vp-shadow-2);
+  transition: var(--t-color);
+  transition-property: background-color, border, box-shadow;
 }
 
 .blog-extract .icon {
   font-size: 16px;
   color: var(--vp-c-text-2);
+  transition: color var(--t-color);
 }
 
 @media (min-width: 768px) {

diff --git a/theme/src/client/components/Tags.vue b/theme/src/client/components/Tags.vue
@@ -58,6 +58,7 @@ const { tags: tagsLink } = useBlogExtract()
   font-size: 20px;
   font-weight: 700;
   color: var(--vp-c-text-1);
+  transition: color var(--t-color);
 }
 
 .tags-title .icon {
@@ -95,6 +96,7 @@ const { tags: tagsLink } = useBlogExtract()
   font-size: 20px;
   font-weight: 600;
   border-bottom: 1px solid var(--vp-c-divider);
+  transition: border-bottom var(--t-color);
 }
 
 .tag-count {
@@ -103,7 +105,7 @@ const { tags: tagsLink } = useBlogExtract()
   margin-left: 4px;
   color: var(--vp-c-bg);
   border-left: 1px solid var(--vp-c-bg);
-  transition: all var(--t-color);
+  transition: color var(--t-color), border-left var(--t-color);
 }
 
 .tags .tag:hover,
@@ -129,14 +131,21 @@ const { tags: tagsLink } = useBlogExtract()
     padding: 20px;
     background-color: var(--vp-c-bg);
     border-radius: 8px;
-    box-shadow: var(--vp-shadow-2);
+    box-shadow: var(--vp-shadow-1);
+    transition: var(--t-color);
+    transition-property: background-color, box-shadow;
   }
 
   .tags-container {
     margin-top: 24px;
     margin-bottom: 24px;
   }
 
+  .tags-nav:hover,
+  .tags-container:hover {
+    box-shadow: var(--vp-shadow-2);
+  }
+
   .tags-container .tag-title {
     margin-top: 0;
   }