Mijn aanvragen: list enter/leave animations + 204 null-body fix
- animate.enter/leave on aanvraag cards and upload rows (native Angular, no @angular/animations) - reduced-motion: skip animation → instant removal - api-client: null-body statuses (204/205/304) must pass null to Response() Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -86,8 +86,26 @@ app-site-footer { view-transition-name: site-footer; }
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
||||
/* List-item enter/leave for lists that add/remove at runtime (aanvraag cards, upload
|
||||
rows). Used via Angular's native `animate.enter`/`animate.leave` — no @angular/animations. */
|
||||
@keyframes app-item-enter { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: none; } }
|
||||
@keyframes app-item-leave {
|
||||
from { opacity: 1; max-block-size: 50rem; }
|
||||
to { opacity: 0; transform: translateY(-0.25rem); max-block-size: 0; margin-block: 0; padding-block: 0; }
|
||||
}
|
||||
.app-item-enter { animation: app-item-enter 220ms ease both; }
|
||||
.app-item-leave {
|
||||
display: block; /* collapse needs block formatting (host is inline/flex by default) */
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
/* ponytail: 50rem max-height hack; if an item is taller the collapse eases slightly late — measure height in JS then. */
|
||||
animation: app-item-leave 260ms ease both;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
::view-transition-group(*),
|
||||
::view-transition-old(*),
|
||||
::view-transition-new(*) { animation: none !important; }
|
||||
/* No animation → Angular removes the leaving node immediately (instant, no motion). */
|
||||
.app-item-enter, .app-item-leave { animation: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user