From e855c18cc44eef4bd6cdecfa6a804a9e03ea76a2 Mon Sep 17 00:00:00 2001
From: LeoKu <czc12580520@gmail.com>
Date: Sun, 5 Jun 2022 17:15:47 +0800
Subject: [PATCH] Improve animation

---
 src/components/CodeModal.vue |  4 ++-
 src/layouts/Container.vue    |  5 +++-
 src/layouts/Header.vue       | 50 +++++++++++++++++++++++++++++++-----
 src/layouts/Sider.vue        |  8 +++++-
 4 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/components/CodeModal.vue b/src/components/CodeModal.vue
index 930fa0b..ea8e8b1 100644
--- a/src/components/CodeModal.vue
+++ b/src/components/CodeModal.vue
@@ -211,7 +211,9 @@ onUnmounted(() => {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.25s ease, transform 0.25s;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 0.25s ease, transform 0.25s;
+  }
 }
 
 .fade-enter-from,
diff --git a/src/layouts/Container.vue b/src/layouts/Container.vue
index 0362b2d..1e38701 100644
--- a/src/layouts/Container.vue
+++ b/src/layouts/Container.vue
@@ -58,7 +58,6 @@ onUnmounted(() => {
 .container {
   height: 100%;
   padding-right: var.$layout-sider-width;
-  transition: padding-right 0.2s;
 
   &.full {
     padding-right: 0;
@@ -67,5 +66,9 @@ onUnmounted(() => {
   @media screen and (max-width: var.$screen-lg) {
     padding-right: 0;
   }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: padding-right 0.2s;
+  }
 }
 </style>
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
index 537f650..c97caf2 100644
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@@ -56,27 +56,65 @@ import { recordEvent } from '@/utils/ga'
     margin-left: auto;
 
     .github-button {
+      position: relative;
+      z-index: 0;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 8rem;
-      height: 2.5rem;
+      width: 9rem;
+      height: 2.6rem;
+      overflow: hidden;
       color: var.$color-text;
       font-weight: bold;
       font-size: 1.05rem;
       background-color: var.$color-dark;
       border-radius: 0.6rem;
       cursor: pointer;
-      transition: box-shadow 0.2s, background-color 0.2s;
       user-select: none;
 
-      &:hover {
-        background-color: lighten(var.$color-dark, 2);
-        box-shadow: 0 0.2rem 1.5rem 0.2rem lighten(var.$color-dark, 5);
+      @media (prefers-reduced-motion: no-preference) {
+        transition: background-color 0.2s;
+
+        &::before,
+        &::after {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          z-index: -1;
+          width: 5rem;
+          height: 5rem;
+          background: var.$color-text;
+          border-radius: 50%;
+          transform: translate(100%, -25%) translate3d(0, 0, 0);
+          opacity: 0;
+          transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1),
+            opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
+          content: '';
+        }
+
+        &:hover {
+          background-color: darken(var.$color-dark, 3);
+
+          &::before,
+          &::after {
+            opacity: 0.15;
+            transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1),
+              opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
+          }
+
+          &::before {
+            transform: translate3d(50%, 0, 0) scale(0.9);
+          }
+
+          &::after {
+            transform: translate(50%, 0) scale(1.1);
+          }
+        }
       }
 
       .text {
         margin-left: 0.5rem;
+        letter-spacing: 0.03rem;
       }
     }
   }
diff --git a/src/layouts/Sider.vue b/src/layouts/Sider.vue
index 46ea8f3..e9b3c01 100644
--- a/src/layouts/Sider.vue
+++ b/src/layouts/Sider.vue
@@ -24,7 +24,13 @@ const { isCollapsed, openSider, closeSider } = useSider()
   right: 0;
   z-index: 200;
   height: 100%;
-  transition: transform 0.2s;
+
+  @media (prefers-reduced-motion: no-preference) {
+    & {
+      transition: transform 0.2s;
+      will-change: transform;
+    }
+  }
 
   .icon-right {
     transition: transform 0.2s;
-- 
GitLab