From 8a5643b2203fbff580bc40a0f6c57c9ecf7345d5 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Sat, 20 Jun 2020 19:13:30 +0800
Subject: [PATCH] Optimize sidebar-dimmer & search-popup animation

---
 source/css/_common/components/post/post-collapse.styl  | 6 +-----
 source/css/_common/components/post/post-header.styl    | 3 ---
 source/css/_common/components/third-party/search.styl  | 5 ++---
 source/css/_common/outline/footer/footer.styl          | 4 ++--
 source/css/_common/outline/sidebar/sidebar-dimmer.styl | 7 ++++---
 5 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/source/css/_common/components/post/post-collapse.styl b/source/css/_common/components/post/post-collapse.styl
index f0f79bb..f10ecff 100644
--- a/source/css/_common/components/post/post-collapse.styl
+++ b/source/css/_common/components/post/post-collapse.styl
@@ -17,7 +17,6 @@
       border-radius: 50%;
       content: ' ';
       height: 10px;
-      left: 0;
       margin-left: -6px;
       margin-top: -4px;
       position: absolute;
@@ -37,7 +36,6 @@
       border-radius: 50%;
       content: ' ';
       height: 8px;
-      left: 0;
       margin-left: -4px;
       margin-top: -4px;
       position: absolute;
@@ -69,8 +67,7 @@
       border-radius: 50%;
       content: ' ';
       height: 6px;
-      left: 0;
-      margin-left: -4px;
+      left: -4px;
       position: absolute;
       top: $font-size-smallest;
       transition: background $transition-ease;
@@ -110,7 +107,6 @@
     background: $whitesmoke;
     content: ' ';
     height: 100%;
-    left: 0;
     margin-left: -2px;
     position: absolute;
     top: 1.25em;
diff --git a/source/css/_common/components/post/post-header.styl b/source/css/_common/components/post/post-header.styl
index 97857d5..ec74b9b 100644
--- a/source/css/_common/components/post/post-header.styl
+++ b/source/css/_common/components/post/post-header.styl
@@ -42,17 +42,14 @@
     bottom: 0;
     content: '';
     height: 2px;
-    left: 0;
     position: absolute;
     transform: scaleX(0);
     transition: transform $transition-ease;
-    visibility: hidden;
     width: 100%;
   }
 
   &:hover::before {
     transform: scaleX(1);
-    visibility: visible;
   }
 
   .fa-external-link-alt {
diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
index 273d63e..ff75552 100644
--- a/source/css/_common/components/third-party/search.styl
+++ b/source/css/_common/components/third-party/search.styl
@@ -9,14 +9,13 @@
   left: 0;
   position: fixed;
   top: 0;
-  transition: visibility 0s linear .2s, background .2s;
+  transition: visibility .4s, background .4s;
   visibility: hidden;
   width: 100%;
   z-index: $zindex-4;
 
   .search-active & {
     background: rgba(0, 0, 0, .3);
-    transition: background .2s;
     visibility: visible;
   }
 }
@@ -27,7 +26,7 @@
   height: 80%;
   margin: auto;
   transform: scale(0);
-  transition: transform .2s;
+  transition: transform .4s;
   width: 700px;
 
   .search-active & {
diff --git a/source/css/_common/outline/footer/footer.styl b/source/css/_common/outline/footer/footer.styl
index a793752..e7a8b62 100644
--- a/source/css/_common/outline/footer/footer.styl
+++ b/source/css/_common/outline/footer/footer.styl
@@ -19,7 +19,7 @@
   main-container();
 }
 
-@keyframes iconAnimate {
+@keyframes icon-animate {
   0%, 100% {
     transform: scale(1);
   }
@@ -62,7 +62,7 @@
   margin: 0 5px;
 
   if (hexo-config('footer.icon.animated')) {
-    animation: iconAnimate 1.33s ease-in-out infinite;
+    animation: icon-animate 1.33s ease-in-out infinite;
   }
 }
 
diff --git a/source/css/_common/outline/sidebar/sidebar-dimmer.styl b/source/css/_common/outline/sidebar/sidebar-dimmer.styl
index 6cf170a..ff0c652 100644
--- a/source/css/_common/outline/sidebar/sidebar-dimmer.styl
+++ b/source/css/_common/outline/sidebar/sidebar-dimmer.styl
@@ -7,17 +7,18 @@
     background: black;
     display: block;
     height: 100%;
-    left: 100%;
+    left: 0;
     opacity: 0;
     position: fixed;
     top: 0;
+    transition: visibility .4s, opacity .4s;
+    visibility: hidden;
     width: 100%;
     z-index: $zindex-1;
 
     .sidebar-active & {
       opacity: .7;
-      transform: translateX(-100%);
-      transition: opacity .5s;
+      visibility: visible;
     }
   }
 }