feat(frontend): add simultaneous slide transitions on directory navigation

- Detect navigation direction (forward/backward) via router beforeEach guard
- Store transition direction in Pinia for cross-component access
- Wrap ExplorerView content in a CSS grid transition wrapper so old and new
  views overlap in the same grid cell during animation
- Add slide-forward/slide-backward transition classes with translate3d
  for GPU-accelerated, simultaneous enter/leave without gaps
- Keep fixed-position search loader outside the transition
This commit is contained in:
2026-05-05 16:07:07 +00:00
parent eea66c0013
commit e979d679b2
4 changed files with 111 additions and 15 deletions
+62
View File
@@ -57,6 +57,66 @@
align-self: stretch;
}
}
/* Directory navigation slide transitions */
.transition-wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.explorer-content {
grid-area: 1 / 1;
}
.slide-forward-enter-active,
.slide-backward-enter-active {
z-index: 2;
}
.slide-forward-leave-active,
.slide-backward-leave-active {
z-index: 1;
}
.slide-forward-enter-active,
.slide-forward-leave-active,
.slide-backward-enter-active,
.slide-backward-leave-active {
transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.slide-forward-enter-from {
transform: translate3d(100%, 0, 0);
}
.slide-forward-enter-to {
transform: translate3d(0, 0, 0);
}
.slide-forward-leave-from {
transform: translate3d(0, 0, 0);
}
.slide-forward-leave-to {
transform: translate3d(-100%, 0, 0);
}
.slide-backward-enter-from {
transform: translate3d(-100%, 0, 0);
}
.slide-backward-enter-to {
transform: translate3d(0, 0, 0);
}
.slide-backward-leave-from {
transform: translate3d(0, 0, 0);
}
.slide-backward-leave-to {
transform: translate3d(100%, 0, 0);
}
@media print {
:root {
--primary-color: black;
@@ -206,6 +266,8 @@ main {
min-height: 0; /* Allow flex child to shrink below content size */
padding-bottom: 3em; /* convenience space on the bottom */
overflow-y: scroll;
overflow-x: hidden;
position: relative;
text-align: center;
}