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

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

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

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

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