0Pricing
Angular Academy · Lesson

Enter and Leave Animations

Animate elements entering and leaving.

Enter and Leave Animations is a free Angular Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Animating Presence

Often you want elements to animate as they appear or disappear, for example when an item is added to or removed from a list. Angular provides the :enter and :leave aliases for this.

void and Presence

An element not in the DOM is in the void state. Entering means void => * and leaving means * => void.

:enter Alias

:enter is shorthand for void => *. Use it to animate elements as they are added.

transition(':enter', [
  style({ opacity: 0 }),
  animate('300ms', style({ opacity: 1 }))
])

:leave Alias

:leave is shorthand for * => void. Angular keeps the element in the DOM until the leave animation finishes.

transition(':leave', [
  animate('300ms', style({ opacity: 0 }))
])

Triggering with Control Flow

Apply the trigger to elements managed by @if or @for. Adding or removing them fires enter/leave.

@if (visible()) {
  <div [@fade]>Hello</div>
}

A Fade Trigger

Here is a reusable fade in/out trigger.

trigger('fade', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('200ms', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('200ms', style({ opacity: 0 }))
  ])
])

Slide In Example

Combine transform and opacity for a slide-in effect on enter.

transition(':enter', [
  style({ transform: 'translateY(-10px)', opacity: 0 }),
  animate('250ms ease-out',
    style({ transform: 'translateY(0)', opacity: 1 }))
])

List Item Animations

Place the trigger on each item inside @for; adding or removing items animates each one independently.

@for (item of items(); track item.id) {
  <li [@fade]>{{ item.name }}</li>
}

Why Leave Needs the Engine

Normally a removed element vanishes instantly. The animation engine intercepts removal, holds the node, runs the :leave animation, then removes it, all automatically.

Disabling Animations

Bind @.disabled to skip animations conditionally, useful for reduced-motion preferences or initial render.

<div [@.disabled]="prefersReducedMotion">...</div>

Best Practices

Keep enter/leave short and subtle. Respect prefers-reduced-motion. Animate transform and opacity (GPU-friendly) rather than layout properties for smoothness.

Quick Check

Test your understanding of enter/leave animations.

Recap

You learned that :enter (void => *) and :leave (* => void) animate elements as they are added and removed, working with @if/@for. The engine holds leaving nodes until their animation completes.

Frequently asked questions

Is the “Enter and Leave Animations” lesson free?

Yes — the full text of “Enter and Leave Animations” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Enter and Leave Animations”?

Animate elements entering and leaving. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Enter and Leave Animations” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Animation Basics: trigger and state
  2. Transitions and Timing
  3. Enter and Leave Animations
  4. Keyframes and Staggering
← Back to Angular Academy