perf: imporve post list float animation
use css will-change to improve performance issue #199
This commit is contained in:
parent
164a977f02
commit
57c541e6db
|
@ -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
24
style.css
|
@ -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: ""
|
||||||
|
|
Loading…
Reference in New Issue