From 5b72a1de42bbb7b02ad03b37906dcb1add4116f1 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Sun, 28 Jun 2020 21:55:51 +0800
Subject: [PATCH] Optimize header animation

---
 layout/_scripts/noscript.njk                    | 4 +++-
 source/css/_common/outline/header/header.styl   | 6 ++++++
 source/css/_common/outline/header/site-nav.styl | 8 --------
 source/js/motion.js                             | 7 ++-----
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/layout/_scripts/noscript.njk b/layout/_scripts/noscript.njk
index 33621ed..10f6f4f 100644
--- a/layout/_scripts/noscript.njk
+++ b/layout/_scripts/noscript.njk
@@ -2,6 +2,8 @@
   <style>
   body { margin-top: 2rem; }
 
+  .use-motion .header-inner,
+  .use-motion .site-brand-container .toggle,
   .use-motion .menu-item,
   .sidebar-inner,
   .use-motion .post-block,
@@ -13,7 +15,7 @@
 
   .use-motion .site-title,
   .use-motion .site-subtitle,
-  .use-motion .site-brand-container .toggle {
+  .use-motion .custom-logo-image {
     opacity: initial;
     top: initial;
   }
diff --git a/source/css/_common/outline/header/header.styl b/source/css/_common/outline/header/header.styl
index cb884d4..dc12c74 100644
--- a/source/css/_common/outline/header/header.styl
+++ b/source/css/_common/outline/header/header.styl
@@ -23,6 +23,12 @@
   padding: 0 10px;
 }
 
+.use-motion {
+  .header-inner, .site-brand-container .toggle {
+    opacity: 0;
+  }
+}
+
 @import 'site-meta';
 @import 'site-nav';
 @import 'menu';
diff --git a/source/css/_common/outline/header/site-nav.styl b/source/css/_common/outline/header/site-nav.styl
index 8979a4e..3a8e50b 100644
--- a/source/css/_common/outline/header/site-nav.styl
+++ b/source/css/_common/outline/header/site-nav.styl
@@ -26,11 +26,3 @@
     display: block;
   }
 }
-
-.use-motion {
-  .site-brand-container .toggle {
-    opacity: 0;
-    position: relative;
-    top: -10px;
-  }
-}
diff --git a/source/js/motion.js b/source/js/motion.js
index 9873778..752c65d 100644
--- a/source/js/motion.js
+++ b/source/js/motion.js
@@ -29,6 +29,7 @@ NexT.motion.integrator = {
 NexT.motion.middleWares = {
   logo: function(integrator) {
     const sequence = [];
+    const header = document.querySelector('.header-inner');
     const image = document.querySelector('.custom-logo-image');
     const title = document.querySelector('.site-title');
     const subtitle = document.querySelector('.site-subtitle');
@@ -62,16 +63,12 @@ NexT.motion.middleWares = {
       });
     }
 
+    header && pushToSequence(header);
     CONFIG.scheme === 'Mist' && logoLine.length && getMistLineSettings(logoLine);
-
     CONFIG.scheme === 'Muse' && image && pushToSequence(image);
-
     title && pushToSequence(title);
-
     subtitle && pushToSequence(subtitle);
-
     toggle.length && pushToSequence(toggle);
-
     (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') && image && pushToSequence(image);
 
     if (sequence.length > 0) {