perf(ux): improve LQIP fade in effect

This commit is contained in:
Cotes Chung 2023-03-21 23:47:01 +08:00
parent 7c23a4ebc5
commit 003e7b60c9
No known key found for this signature in database
GPG Key ID: 0D9E54843167A808
1 changed files with 10 additions and 13 deletions

View File

@ -85,13 +85,9 @@ a {
img {
max-width: 100%;
height: auto;
transition: all 0.35s ease-in-out;
&[data-src] {
&.lazyloaded {
-webkit-animation: fade-in 0.4s ease-in;
animation: fade-in 0.4s ease-in;
}
&[data-lqip='true'] {
&.lazyload,
&.lazyloading {
@ -105,6 +101,11 @@ img {
&.lazyloading {
background: var(--img-bg);
}
&.lazyloaded {
-webkit-animation: fade-in 0.35s ease-in;
animation: fade-in 0.35s ease-in;
}
}
&.shadow {
@ -946,17 +947,13 @@ $sidebar-display: 'sidebar-display';
} /* #sidebar */
@media (hover: hover) {
.card.post-preview {
transition: all 0.35s ease-in-out;
img {
transition: all 0.35s ease-in-out;
}
}
#sidebar ul > li:last-child::after {
transition: top 0.5s ease;
}
.post-preview {
transition: background-color 0.35s ease-in-out;
}
}
.profile-wrapper {