Skip to content

Commit 003e7b6

Browse files
committed
perf(ux): improve LQIP fade in effect
1 parent 7c23a4e commit 003e7b6

File tree

1 file changed

+10
-13
lines changed

1 file changed

+10
-13
lines changed

_sass/addon/commons.scss

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -85,13 +85,9 @@ a {
8585
img {
8686
max-width: 100%;
8787
height: auto;
88+
transition: all 0.35s ease-in-out;
8889

8990
&[data-src] {
90-
&.lazyloaded {
91-
-webkit-animation: fade-in 0.4s ease-in;
92-
animation: fade-in 0.4s ease-in;
93-
}
94-
9591
&[data-lqip='true'] {
9692
&.lazyload,
9793
&.lazyloading {
@@ -105,6 +101,11 @@ img {
105101
&.lazyloading {
106102
background: var(--img-bg);
107103
}
104+
105+
&.lazyloaded {
106+
-webkit-animation: fade-in 0.35s ease-in;
107+
animation: fade-in 0.35s ease-in;
108+
}
108109
}
109110

110111
&.shadow {
@@ -946,17 +947,13 @@ $sidebar-display: 'sidebar-display';
946947
} /* #sidebar */
947948

948949
@media (hover: hover) {
949-
.card.post-preview {
950-
transition: all 0.35s ease-in-out;
951-
952-
img {
953-
transition: all 0.35s ease-in-out;
954-
}
955-
}
956-
957950
#sidebar ul > li:last-child::after {
958951
transition: top 0.5s ease;
959952
}
953+
954+
.post-preview {
955+
transition: background-color 0.35s ease-in-out;
956+
}
960957
}
961958

962959
.profile-wrapper {

0 commit comments

Comments
 (0)