Angular Academy · Lesson

Enter and Leave Animations

Animate elements entering and leaving.

Lesson 3 of 413 steps

Enter and Leave Animations is a free Angular Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Enter and Leave Animations” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Enter and Leave Animations”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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

← Back to Angular Academy