[OCaml] High Intensity Training Online
feat animate page transitions
A freshly swapped content node fades and rises on navigation between Home, Current Workout, and Logbook. The animation runs on the inserted content only, not the masthead. Reduced-motion users get instant transitions via the global animation-duration clamp.
Changed files
ENHANCEMENTS.org
@@ -52,7 +52,7 @@
52
52
Increase the bottom-navigation button text font size to better support WCAG-aligned readability.
53
53
** DONE Harmonize keyboard-focus halo styling
54
54
Change the WCAG keyboard-navigation focus halo color so it follows the general UI theme and is less visually obtrusive.
55
Removed:
** TODO Animate page transitions
55
Added:
** DONE Animate page transitions
56
56
Animate page transitions between Home, Current Workout, and Logbook.
57
57
** TODO Confirm workout cancellation in a modal
58
58
Show a modal menu that confirms workout logging cancellation before cancelling.
lib/web/assets/hito.css
@@ -167,6 +167,19 @@
167
167
padding: clamp(1.25rem, 3vw, 2rem);
168
168
}
169
169
170
Added:
/* Page transitions. The SPA client swaps the content node on navigation
171
Added:
between Home, Current Workout, and Logbook; a freshly inserted node runs this
172
Added:
fade-and-rise, so each transition animates without script. Reduced-motion
173
Added:
users get it instantly, via the global clamp. */
174
Added:
@keyframes page-enter {
175
Added:
from { opacity: 0; transform: translateY(0.5rem); }
176
Added:
to { opacity: 1; transform: translateY(0); }
177
Added:
}
178
Added:
[data-hito-app-content],
179
Added:
[data-hito-workout-content] {
180
Added:
animation: page-enter 220ms ease both;
181
Added:
}
182
Added:
170
183
h1,
171
184
h2 {
172
185
max-width: 38rem;