milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor the lazy loader for images

Browse source
This commit is contained in:
MrTimscampi 2020-04-12 03:49:42 +02:00
parent 1778404354
commit fc6a11bb4b
4 changed files with 39 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/images/style.css
View file

@ -1,26 +1,15 @@
.lazy-image-fadein {
.cardImageContainer.lazy {
opacity: 0;
animation: lazy-image-fadein 330ms ease-in normal both;
-webkit-animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-o-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-name: popInAnimation;
-moz-animation-name: popInAnimation;
-o-animation-name: popInAnimation;
animation-name: popInAnimation;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-moz-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
-o-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
}
.lazy-image-fadein-fast {
animation: lazy-image-fadein 160ms ease-in normal both;
.cardImageContainer.lazy.lazy-image-fadein {
opacity: 1;
transition: opacity 1s;
}
.cardImageContainer.lazy.lazy-image-fadein-fast {
opacity: 1;
transition: opacity 0.5s;
}
@keyframes lazy-image-fadein {
@ -32,13 +21,3 @@
opacity: 1;
}
}
@keyframes popInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}