Optimize sidebar-dimmer & search-popup animation

next-theme · Jun 20, 2020 · 8a5643b · 8a5643b
1 parent b2ae986
commit 8a5643b
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
     }
   }
 }