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:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user