From 57c541e6db5a2fabf27f3da5d6eb4db9a2de6595 Mon Sep 17 00:00:00 2001
From: Spirit <spirit1431007@gmail.com>
Date: Sat, 21 Mar 2020 16:13:01 +0800
Subject: [PATCH] perf: imporve post list float animation use css will-change
 to improve performance issue #199

---
 js/sakura-app.js |  2 ++
 style.css        | 24 +++++++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/js/sakura-app.js b/js/sakura-app.js
index 14be44a..98ef975 100644
--- a/js/sakura-app.js
+++ b/js/sakura-app.js
@@ -78,10 +78,12 @@ function post_list_show_animation() {
         function callback(entries) {
             entries.forEach((article) => {
                 if (article.target.classList.contains("post-list-show")) {
+                    article.target.style.willChange = 'auto';
                     io.unobserve(article.target)
                 } else {
                     if (article.isIntersecting) {
                         article.target.classList.add("post-list-show");
+                        article.target.style.willChange = 'auto';
                         io.unobserve(article.target)
                     }
                 }
diff --git a/style.css b/style.css
index 8c121db..ccc88cb 100644
--- a/style.css
+++ b/style.css
@@ -1086,6 +1086,7 @@ a:hover {
     display: block
 }
 
+
 .m-nav {
     display: none
 }
@@ -1142,6 +1143,22 @@ a:hover {
     max-width: 100%
 }
 
+@media(max-width:1200px) {
+    .site-top .lower nav{
+        right: calc(-150px - 100%);
+        position: absolute;
+        float: right;
+        animation: searchbox .2s;
+        min-width: 860px;
+    }
+    .site-top .lower nav.navbar {
+        right: calc(-50px - 100%);
+    }
+    .site-top .lower nav.navbar ul {
+        background: #fff;
+    }
+}
+
 #show-nav {
     position: relative;
     float: right;
@@ -1443,6 +1460,7 @@ i.iconfont.hotpost {
 }
 
 .post-list-thumb {
+    will-change: transform;
     float: left;
     width: 100%;
     height: 300px;
@@ -1456,7 +1474,7 @@ i.iconfont.hotpost {
 
 @media (max-width:860px) {
     .post-list-thumb {
-        margin: 0;
+        margin: 10px 0 10px;
         height: auto
     }
 }
@@ -6839,9 +6857,9 @@ input[type=radio]:checked:before {
     margin-right: 22px
 }
 
-@media (max-width:800px) {
+@media (max-width:860px) {
     .changeSkin-gear {
-        visibility: hidden
+        visibility: hidden !important
     }
     .changeSkin-gear span::before {
         content: ""