Content-only page transitions + dependency security overrides
- Persistent ShellComponent hosts the router-outlet so header/footer mount once (no re-mount flash); pages nest under a shell route. page-shell is now content-only; page-layout removed. - Native withViewTransitions() cross-fades only the routed content (chrome gets stable view-transition-names); respects prefers-reduced-motion. - package.json overrides pin patched transitive dev/build deps: npm audit 16 (3 high/9 mod/4 low) -> 5 low; shipped app stays at 0 (npm audit --omit=dev). No Angular downgrade, no breaking Babel 8 bump. jsdom 28 -> 29. - README: page-transitions section + honest dependency-security note. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -6,3 +6,21 @@
|
||||
@import '@rijkshuisstijl-community/components-css/dist/index.css'; /* component classes */
|
||||
|
||||
html, body { margin: 0; min-height: 100%; }
|
||||
|
||||
/* Route transitions (withViewTransitions): cross-fade the routed CONTENT only.
|
||||
The chrome gets its own stable view-transition-name so it's lifted out of the
|
||||
`root` snapshot and stays put while the content fades. */
|
||||
app-site-header { view-transition-name: site-header; }
|
||||
app-site-footer { view-transition-name: site-footer; }
|
||||
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation-duration: 180ms;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
::view-transition-group(*),
|
||||
::view-transition-old(*),
|
||||
::view-transition-new(*) { animation: none !important; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user