github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-02-04 08:49:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

tweak animation - no crossfade by default

Browse Source
This commit is contained in:
midzelis
2026-02-02 21:06:40 +00:00
parent 1de93371ee
commit f9937b6c72
2 changed files with 63 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
web/src/app.css
View File

@@ -86,7 +86,20 @@
--vt-viewer-slide-easing: cubic-bezier(0.2, 0, 0, 1); --vt-viewer-slide-easing: cubic-bezier(0.2, 0, 0, 1);
--vt-viewer-slide-distance: 15%; --vt-viewer-slide-distance: 15%;
--vt-viewer-opacity-start: 0.1; --vt-viewer-opacity-start: 0.1;
--vt-viewer-blur-max: 4px; --vt-viewer-blur-max: 0px;
--vt-viewer-next-in: slideInRight;
--vt-viewer-next-out: slideOutLeft;
--vt-viewer-prev-in: slideInLeft;
--vt-viewer-prev-out: slideOutRight;
--vt-viewer-old-opacity: 0;
/* For fly (slide+fade): uncomment these and comment above */
/* --vt-viewer-next-in: flyInRight; */
/* --vt-viewer-next-out: flyOutLeft; */
/* --vt-viewer-prev-in: flyInLeft; */
/* --vt-viewer-prev-out: flyOutRight; */
/* --vt-viewer-old-opacity: 1; */
} }
button:not(:disabled), button:not(:disabled),
@@ -247,6 +260,7 @@
::view-transition-group(letterbox-top), ::view-transition-group(letterbox-top),
::view-transition-group(letterbox-bottom) { ::view-transition-group(letterbox-bottom) {
animation-duration: var(--vt-duration-viewer-navigation); animation-duration: var(--vt-duration-viewer-navigation);
animation-timing-function: var(--vt-viewer-slide-easing);
z-index: 4; z-index: 4;
} }
@@ -304,34 +318,75 @@
} }
::view-transition-old(next), ::view-transition-old(next),
::view-transition-old(next-old) { ::view-transition-old(next-old) {
animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyOutLeft forwards; animation-name: var(--vt-viewer-next-out);
animation-duration: var(--vt-duration-viewer-navigation);
animation-timing-function: var(--vt-viewer-slide-easing);
animation-fill-mode: forwards;
opacity: var(--vt-viewer-old-opacity);
overflow: hidden; overflow: hidden;
} }
::view-transition-new(next), ::view-transition-new(next),
::view-transition-new(next-new) { ::view-transition-new(next-new) {
animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyInRight forwards; animation-name: var(--vt-viewer-next-in);
animation-duration: var(--vt-duration-viewer-navigation);
animation-timing-function: var(--vt-viewer-slide-easing);
animation-fill-mode: forwards;
overflow: hidden; overflow: hidden;
} }
::view-transition-old(previous) { ::view-transition-old(previous) {
animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyOutRight forwards; animation-name: var(--vt-viewer-prev-out);
animation-duration: var(--vt-duration-viewer-navigation);
animation-timing-function: var(--vt-viewer-slide-easing);
animation-fill-mode: forwards;
opacity: var(--vt-viewer-old-opacity);
} }
::view-transition-old(previous-old) { ::view-transition-old(previous-old) {
animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyOutRight forwards; animation-name: var(--vt-viewer-prev-out);
animation-duration: var(--vt-duration-viewer-navigation);
animation-timing-function: var(--vt-viewer-slide-easing);
animation-fill-mode: forwards;
opacity: var(--vt-viewer-old-opacity);
overflow: hidden; overflow: hidden;
z-index: -1; z-index: -1;
} }
::view-transition-new(previous) { ::view-transition-new(previous) {
animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyInLeft forwards; animation-name: var(--vt-viewer-prev-in);
animation-duration: var(--vt-duration-viewer-navigation);
animation-timing-function: var(--vt-viewer-slide-easing);
animation-fill-mode: forwards;
} }
::view-transition-new(previous-new) { ::view-transition-new(previous-new) {
animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyInLeft forwards; animation-name: var(--vt-viewer-prev-in);
animation-duration: var(--vt-duration-viewer-navigation);
animation-timing-function: var(--vt-viewer-slide-easing);
animation-fill-mode: forwards;
overflow: hidden; overflow: hidden;
} }
@keyframes slideInLeft {
from {
transform: translateX(calc(-1 * var(--vt-viewer-slide-distance)));
}
}
@keyframes slideInRight {
from {
transform: translateX(var(--vt-viewer-slide-distance));
}
}
@keyframes slideOutLeft {
/* No animation needed, instant hide via opacity */
}
@keyframes slideOutRight {
/* No animation needed, instant hide via opacity */
}
@keyframes flyInLeft { @keyframes flyInLeft {
from { from {
transform: translateX(calc(-1 * var(--vt-viewer-slide-distance))); transform: translateX(calc(-1 * var(--vt-viewer-slide-distance)));

1
web/src/lib/utils/tunables.ts
View File

@@ -31,4 +31,5 @@ export const TUNABLES = {
IMAGE_THUMBNAIL: { IMAGE_THUMBNAIL: {
THUMBHASH_FADE_DURATION: getNumber(storage.getItem('THUMBHASH_FADE_DURATION'), 100), THUMBHASH_FADE_DURATION: getNumber(storage.getItem('THUMBHASH_FADE_DURATION'), 100),
}, },
REDUCE_MOTION: getBoolean(storage.getItem('REDUCE_MOTION'), false),
}; };