From 57c541e6db5a2fabf27f3da5d6eb4db9a2de6595 Mon Sep 17 00:00:00 2001 From: Spirit 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: ""