mirror of
https://github.com/immich-app/immich.git
synced 2026-05-18 03:10:24 +03:00
feat(web): hero view transitions for memory viewer
Change-Id: I6221557a6b8561122baccbc651a48ae46a6a6964
This commit is contained in:
midzelis
+242
-29
@@ -328,8 +328,189 @@
|
||||
}
|
||||
::view-transition-new(hero) {
|
||||
animation: none;
|
||||
align-content: center;
|
||||
}
|
||||
::view-transition-old(memory-overlay),
|
||||
::view-transition-old(memory-controls),
|
||||
::view-transition-new(memory-overlay),
|
||||
::view-transition-new(memory-controls) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: none;
|
||||
object-position: left top;
|
||||
}
|
||||
|
||||
html:active-view-transition-type(memory) {
|
||||
&::view-transition-group(hero),
|
||||
&::view-transition-group(hero-out) {
|
||||
animation-duration: var(--vt-duration-memory);
|
||||
animation-timing-function: var(--vt-memory-easing);
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
&::view-transition-group(memory-overlay),
|
||||
&::view-transition-group(memory-controls) {
|
||||
animation: none;
|
||||
z-index: 5;
|
||||
}
|
||||
&::view-transition-group(memory-overlay-prev),
|
||||
&::view-transition-group(memory-overlay-next) {
|
||||
animation: none;
|
||||
z-index: 2;
|
||||
opacity: 0.25;
|
||||
}
|
||||
&::view-transition-image-pair(memory-overlay),
|
||||
&::view-transition-image-pair(memory-controls) {
|
||||
isolation: auto;
|
||||
}
|
||||
&::view-transition-old(memory-overlay),
|
||||
&::view-transition-old(memory-controls) {
|
||||
animation: 120ms linear fadeOut forwards;
|
||||
}
|
||||
&::view-transition-new(memory-overlay),
|
||||
&::view-transition-new(memory-controls) {
|
||||
animation: 200ms linear calc(var(--vt-duration-memory) - 200ms) fadeIn forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
&::view-transition-old(memory-overlay-prev),
|
||||
&::view-transition-old(memory-overlay-next) {
|
||||
display: none;
|
||||
}
|
||||
&::view-transition-new(memory-overlay-prev),
|
||||
&::view-transition-new(memory-overlay-next) {
|
||||
animation: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: none;
|
||||
object-position: left top;
|
||||
}
|
||||
&::view-transition-image-pair(hero) {
|
||||
isolation: auto;
|
||||
}
|
||||
&::view-transition-old(hero) {
|
||||
display: none;
|
||||
}
|
||||
&::view-transition-new(hero) {
|
||||
animation: none;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&::view-transition-image-pair(hero-out) {
|
||||
isolation: auto;
|
||||
}
|
||||
&::view-transition-old(hero-out) {
|
||||
display: none;
|
||||
}
|
||||
&::view-transition-new(hero-out) {
|
||||
animation: var(--vt-duration-memory) var(--vt-memory-easing) dimDown forwards;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&::view-transition-group(memory-departing) {
|
||||
animation: none;
|
||||
}
|
||||
&::view-transition-old(memory-departing) {
|
||||
animation: calc(var(--vt-duration-memory) * 0.4) linear fadeFromDim forwards;
|
||||
}
|
||||
&::view-transition-new(memory-departing) {
|
||||
animation: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
html:active-view-transition-type(memory-enter) {
|
||||
&::view-transition-group(hero) {
|
||||
animation-duration: var(--vt-duration-hero);
|
||||
animation-timing-function: var(--vt-memory-easing);
|
||||
overflow: hidden;
|
||||
}
|
||||
&::view-transition-old(hero),
|
||||
&::view-transition-new(hero) {
|
||||
animation: none;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&::view-transition-group(memory-overlay),
|
||||
&::view-transition-group(memory-controls),
|
||||
&::view-transition-group(memory-nav-buttons) {
|
||||
animation: none;
|
||||
z-index: 5;
|
||||
}
|
||||
&::view-transition-old(memory-overlay),
|
||||
&::view-transition-old(memory-controls),
|
||||
&::view-transition-old(memory-nav-buttons) {
|
||||
animation: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
&::view-transition-new(memory-overlay),
|
||||
&::view-transition-new(memory-controls),
|
||||
&::view-transition-new(memory-nav-buttons) {
|
||||
animation: 200ms linear var(--vt-duration-hero) fadeIn forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::view-transition-old(memory-fade-out) {
|
||||
animation: 500ms linear crossfadeOut forwards;
|
||||
}
|
||||
::view-transition-new(memory-fade-in) {
|
||||
animation: 500ms linear crossfadeIn forwards;
|
||||
}
|
||||
|
||||
html:active-view-transition-type(memory-nav-fast) {
|
||||
&::view-transition-old(memory-fade-out) {
|
||||
animation-duration: 250ms;
|
||||
}
|
||||
&::view-transition-new(memory-fade-in) {
|
||||
animation-duration: 250ms;
|
||||
}
|
||||
&::view-transition-old(memory-overlay),
|
||||
&::view-transition-old(memory-controls) {
|
||||
animation-duration: 100ms;
|
||||
}
|
||||
&::view-transition-new(memory-overlay),
|
||||
&::view-transition-new(memory-controls) {
|
||||
animation: 100ms linear 150ms fadeIn forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html:active-view-transition-type(memory-nav) {
|
||||
&::view-transition-group(memory-overlay),
|
||||
&::view-transition-group(memory-controls) {
|
||||
animation: none;
|
||||
z-index: 5;
|
||||
}
|
||||
&::view-transition-image-pair(memory-overlay),
|
||||
&::view-transition-image-pair(memory-controls) {
|
||||
isolation: auto;
|
||||
}
|
||||
&::view-transition-old(memory-overlay),
|
||||
&::view-transition-old(memory-controls) {
|
||||
animation: 150ms linear fadeOut forwards;
|
||||
}
|
||||
&::view-transition-new(memory-overlay),
|
||||
&::view-transition-new(memory-controls) {
|
||||
animation: 200ms linear 300ms fadeIn forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
&::view-transition-group(memory-overlay-prev),
|
||||
&::view-transition-group(memory-overlay-next) {
|
||||
animation: none;
|
||||
opacity: 0.25;
|
||||
}
|
||||
&::view-transition-old(memory-overlay-prev),
|
||||
&::view-transition-old(memory-overlay-next) {
|
||||
display: none;
|
||||
}
|
||||
&::view-transition-new(memory-overlay-prev),
|
||||
&::view-transition-new(memory-overlay-next) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
::view-transition-old(next),
|
||||
::view-transition-old(next-old),
|
||||
::view-transition-new(next),
|
||||
@@ -381,6 +562,24 @@
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@keyframes fadeFromDim {
|
||||
from {
|
||||
opacity: 0.25;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dimDown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flyInLeft {
|
||||
from {
|
||||
transform: translateX(calc(-1 * var(--vt-viewer-slide-distance)));
|
||||
@@ -539,36 +738,50 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::view-transition-group(previous),
|
||||
::view-transition-group(previous-old),
|
||||
::view-transition-group(next),
|
||||
::view-transition-group(next-old) {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
transform: none !important;
|
||||
html:active-view-transition-type(viewer-nav) {
|
||||
&::view-transition-group(previous),
|
||||
&::view-transition-group(previous-old),
|
||||
&::view-transition-group(next),
|
||||
&::view-transition-group(next-old) {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
&::view-transition-old(previous),
|
||||
&::view-transition-old(previous-old),
|
||||
&::view-transition-old(next),
|
||||
&::view-transition-old(next-old) {
|
||||
animation: var(--vt-duration-viewer-navigation) fadeOut forwards;
|
||||
transform-origin: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::view-transition-new(previous),
|
||||
&::view-transition-new(previous-new),
|
||||
&::view-transition-new(next),
|
||||
&::view-transition-new(next-new) {
|
||||
animation: var(--vt-duration-viewer-navigation) fadeIn forwards;
|
||||
transform-origin: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
::view-transition-old(previous),
|
||||
::view-transition-old(previous-old),
|
||||
::view-transition-old(next),
|
||||
::view-transition-old(next-old) {
|
||||
animation: var(--vt-duration-viewer-navigation) fadeOut forwards;
|
||||
transform-origin: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::view-transition-new(previous),
|
||||
::view-transition-new(previous-new),
|
||||
::view-transition-new(next),
|
||||
::view-transition-new(next-new) {
|
||||
animation: var(--vt-duration-viewer-navigation) fadeIn forwards;
|
||||
transform-origin: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
html:active-view-transition-type(memory-enter) {
|
||||
&::view-transition-group(hero) {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
&::view-transition-old(hero) {
|
||||
animation: var(--vt-duration-default) fadeOut forwards;
|
||||
}
|
||||
&::view-transition-new(hero) {
|
||||
animation: var(--vt-duration-default) fadeIn forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user