mirrors/sakura
1
0
Fork 0
mirror of https://github.com/mashirozx/sakura.git synced 2024-11-22 14:58:14 +08:00
Code Issues Projects Releases Wiki Activity

perf: imporve post list float animation

Browse Source 
use css will-change to improve performance
issue #199
This commit is contained in:
Spirit 2020-03-21 16:13:01 +08:00
parent 164a977f02
commit 57c541e6db
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/sakura-app.js
View File

@ -78,10 +78,12 @@ function post_list_show_animation() {
function callback(entries) { function callback(entries) {
entries.forEach((article) => { entries.forEach((article) => {
if (article.target.classList.contains("post-list-show")) { if (article.target.classList.contains("post-list-show")) {
article.target.style.willChange = 'auto';
io.unobserve(article.target) io.unobserve(article.target)
} else { } else {
if (article.isIntersecting) { if (article.isIntersecting) {
article.target.classList.add("post-list-show"); article.target.classList.add("post-list-show");
article.target.style.willChange = 'auto';
io.unobserve(article.target) io.unobserve(article.target)
} }
} }

24
style.css
View File

@ -1086,6 +1086,7 @@ a:hover {
display: block display: block
} }
.m-nav { .m-nav {
display: none display: none
} }
@ -1142,6 +1143,22 @@ a:hover {
max-width: 100% 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 { #show-nav {
position: relative; position: relative;
float: right; float: right;
@ -1443,6 +1460,7 @@ i.iconfont.hotpost {
} }
.post-list-thumb { .post-list-thumb {
will-change: transform;
float: left; float: left;
width: 100%; width: 100%;
height: 300px; height: 300px;
@ -1456,7 +1474,7 @@ i.iconfont.hotpost {
@media (max-width:860px) { @media (max-width:860px) {
.post-list-thumb { .post-list-thumb {
margin: 0; margin: 10px 0 10px;
height: auto height: auto
} }
} }
@ -6839,9 +6857,9 @@ input[type=radio]:checked:before {
margin-right: 22px margin-right: 22px
} }
@media (max-width:800px) { @media (max-width:860px) {
.changeSkin-gear { .changeSkin-gear {
visibility: hidden visibility: hidden !important
} }
.changeSkin-gear span::before { .changeSkin-gear span::before {
content: "" content: ""