kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

slide animation
CI/CD Pipeline / Build and Push PocketBase Docker Image (push) Successful in 14s
Details
CI/CD Pipeline / i18n Catalog Check (push) Successful in 33s
Details
CI/CD Pipeline / Build and Push App Docker Image (push) Successful in 3m27s
Details
CI/CD Pipeline / Deploy to Kubernetes (push) Successful in 8m28s
Details

Browse Source
This commit is contained in:
kyle
2026-09-10 22:21:16 -07:00
parent 8971748d5c
commit c4a9d47180
20 changed files with 232 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles.css
+79
View File
@@ -50,7 +50,86 @@ textarea,
transform: scale(0.90) translateY(-4px);
}
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(page),
::view-transition-new(page),
::view-transition-old(app-header),
::view-transition-new(app-header) {
animation-duration: 180ms;
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
html[data-nav-direction="forward"]::view-transition-old(page) {
animation: 300ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-under-out;
}
html[data-nav-direction="forward"]::view-transition-new(page) {
animation: 300ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-over-in;
}
html[data-nav-direction="back"]::view-transition-old(page) {
animation: 300ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-over-out;
z-index: 1;
}
html[data-nav-direction="back"]::view-transition-new(page) {
animation: 300ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-under-in;
}
html[data-nav-direction="forward"][data-header-vt="exit"]::view-transition-old(app-header) {
animation: 300ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-header-out;
}
html[data-nav-direction="back"][data-header-vt="exit"]::view-transition-old(app-header) {
animation: 300ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-over-out;
}
html[data-nav-direction="forward"][data-header-vt="enter"]::view-transition-new(app-header) {
animation: 300ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-page-over-in;
}
html[data-nav-direction="back"][data-header-vt="enter"]::view-transition-new(app-header) {
animation: 300ms cubic-bezier(0.32, 0.72, 0, 1) both flxn-header-in;
}
@keyframes flxn-page-over-in {
from { transform: translateX(100%); }
}
@keyframes flxn-page-over-out {
to { transform: translateX(100%); }
}
@keyframes flxn-page-under-out {
to { transform: translateX(-25%); opacity: 0.8; }
}
@keyframes flxn-page-under-in {
from { transform: translateX(-25%); opacity: 0.8; }
}
@keyframes flxn-header-out {
45% { opacity: 0; }
to { transform: translateX(-25%); opacity: 0; }
}
@keyframes flxn-header-in {
from { transform: translateX(-25%); opacity: 0; }
}
@keyframes flxn-vt-fade-out {
to { opacity: 0; }
}
@keyframes flxn-vt-fade-in {
from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-image-pair(*) {
animation: none !important;
}
::view-transition-old(*) {
animation: 120ms ease both flxn-vt-fade-out !important;
z-index: auto !important;
}
::view-transition-new(*) {
animation: 120ms ease both flxn-vt-fade-in !important;
}
.app,
[data-drawer-level] {
transition: none;