mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Fix blurhash entry animation

Browse source
This commit is contained in:
MrTimscampi 2020-06-29 23:57:05 +02:00
parent 5924c17c72
commit 0361a2d58d
2 changed files with 23 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/images/imageLoader.js
View file

@ -36,18 +36,18 @@ import 'css!./style';
imgData.data.set(pixels); imgData.data.set(pixels);
ctx.putImageData(imgData, 0, 0); ctx.putImageData(imgData, 0, 0);
let child = target.parentNode.insertBefore(canvas, target); requestAnimationFrame(() => {
child.classList.add('blurhash-canvas'); canvas.classList.add('blurhash-canvas');
if (userSettings.enableFastFadein()) { if (userSettings.enableFastFadein()) {
child.classList.add('lazy-blurhash-fadein-fast'); canvas.classList.add('lazy-blurhash-fadein-fast');
} else { } else {
child.classList.add('lazy-blurhash-fadein'); canvas.classList.add('lazy-blurhash-fadein');
} }
child.style.opacity = 1; target.parentNode.insertBefore(canvas, target);
target.classList.add('blurhashed');
target.classList.add('blurhashed'); target.removeAttribute('data-blurhash');
target.removeAttribute('data-blurhash'); });
} }
} }

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

@ -12,12 +12,22 @@
opacity: 0; opacity: 0;
} }
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.lazy-blurhash-fadein-fast { .lazy-blurhash-fadein-fast {
transition: opacity 0.2s; animation: fadein 0.2s;
} }
.lazy-blurhash-fadein { .lazy-blurhash-fadein {
transition: opacity 0.7s; animation: fadein 0.7s;
} }
.blurhash-canvas { .blurhash-canvas {