Animate entrances and exits with animate.enter and animate.leave — plain CSS keyframes driven by Angular, no animation library needed.
Why: animate.enter applies a CSS class while an element enters, and animate.leave keeps the element around just long enough to play its exit animation — your keyframes decide what the classes do. Note: needs Angular 20.2+; older codebases use the @angular/animations package, which is being phased out in favor of this CSS-first approach.
import { Component, signal } from '@angular/core'
@Component({
selector: 'app-notification',
template: `
<button (click)="visible.set(!visible())">Toggle</button>
@if (visible()) {
<!-- pop-in plays while entering; fade-out plays while leaving -->
<div animate.enter="pop-in" animate.leave="fade-out" class="note">
Saved successfully
</div>
}
`,
styles: `
.note {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
}
.pop-in {
animation: pop-in 0.3s ease;
}
.fade-out {
animation: fade-out 0.3s ease;
}
@keyframes pop-in {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
`,
})
export class Notification {
visible = signal(true)
}