Retain Angular animations in v23 until coordinated enter/leave has a supported migration path #71703

Activity

1. angular-robot

   added

   area: animationslegacy animations package only. Otherwise use area: core.legacy animations package only. Otherwise use area: core.

   on Oct 28, 2026
2. angular-robot

   added this to the needsTriage milestone on Oct 28, 2026
3. ngbot

   added this to the needsTriage milestone on Oct 28, 2026
4. JeanMeche commented on Oct 28, 2026

   

   JeanMeche

   on Oct 28, 2026

   Member

   More actions

   It's unlikely that we'll remove legacy animations in v23. I'll update the deprecation message in the docs.

   👀React with 👀1Reacted by Michael Small
5. JeanMeche

   closed this as not plannedon Oct 28, 2026
6. JeanMeche

   reopened this on Oct 28, 2026
7. JeanMeche commented on Oct 28, 2026

   

   JeanMeche

   on Oct 28, 2026

   Last edited by JeanMeche

   Member

   More actions

   Is this what you're looking for ?

   import { Component, signal } from '@angular/core';
   import {
     animate,
     animateChild,
     query,
     stagger,
     style,
     transition,
     trigger,
   } from '@angular/animations';
   
   @Component({
     selector: 'app-first-control',
     template: `<input placeholder="First control" />`,
   })
   export class FirstControl {}
   
   @Component({
     selector: 'app-second-control',
     template: `<button type="button">Second control</button>`,
   })
   export class SecondControl {}
   
   @Component({
     selector: 'app-native-demo',
     imports: [FirstControl, SecondControl],
     template: `
       <h1>animate.enter / animate.leave</h1>
       <button type="button" (click)="toggle()">Toggle step (current: {{ step() }})</button>
   
       <div class="relative">
         @switch (step()) {
           @case ('first') {
             <section class="panel" animate.leave="panel-leave">
               <h2 class="fade-item" style="--i: 0; --n: 2">First step</h2>
               <app-first-control class="fade-item" style="--i: 1; --n: 2" />
             </section>
           }
           @case ('second') {
             <section class="panel" animate.leave="panel-leave">
               <h2 class="fade-item" style="--i: 0; --n: 2">Second step</h2>
               <app-second-control class="fade-item" style="--i: 1; --n: 2" />
             </section>
           }
         }
       </div>
     `,
     styles: `
       .relative { position: relative; }
       .panel { position: absolute; padding: 1rem; }
       /* enter: 250ms, 469ms delay, staggered by 100ms. @starting-style applies on first style resolution, so no flash */
       .fade-item {
         display: block;
         opacity: 1;
         transition: opacity 250ms ease-in calc(469ms + var(--i) * 100ms);
         @starting-style { opacity: 0; }
       }
       /* leave runs on the section so Angular keeps it whole until the staggered children finish (250ms + 100ms) */
       .panel-leave { animation: hold 350ms; }
       .panel-leave .fade-item {
         transition: none;
         animation: fade-out 250ms ease-out calc((var(--n) - 1 - var(--i)) * 100ms) both;
       }
       @keyframes hold { from { opacity: 1; } to { opacity: 1; } }
       @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
     `,
   })
   export class NativeDemo {
     protected readonly step = signal<'first' | 'second'>('first');
   
     protected toggle() {
       this.step.update((s) => (s === 'first' ? 'second' : 'first'));
     }
   }
   
   const fadeItems = trigger('fadeItems', [
     transition('* => *', [query('@fadeItemsParent', animateChild(), { optional: true })]),
   ]);
   
   const fadeItemsParent = trigger('fadeItemsParent', [
     transition(':enter', [
       query(
         '.fade-item',
         [
           style({ opacity: 0 }),
           stagger(100, animate('250ms 469ms ease-in', style({ opacity: 1 }))),
         ],
         { optional: true },
       ),
     ]),
     transition(':leave', [
       query('.fade-item', [stagger(-100, animate('250ms ease-out', style({ opacity: 0 })))], {
         optional: true,
       }),
     ]),
   ]);
   
   @Component({
     selector: 'app-legacy-demo',
     imports: [FirstControl, SecondControl],
     animations: [fadeItems, fadeItemsParent],
     template: `
       <h1>Legacy @angular/animations</h1>
       <button type="button" (click)="toggle()">Toggle step (current: {{ step() }})</button>
   
       <div [@fadeItems]="step()" class="relative">
         @switch (step()) {
           @case ('first') {
             <section @fadeItemsParent class="panel">
               <h2 class="fade-item">First step</h2>
               <app-first-control class="fade-item" />
             </section>
           }
           @case ('second') {
             <section @fadeItemsParent class="panel">
               <h2 class="fade-item">Second step</h2>
               <app-second-control class="fade-item" />
             </section>
           }
         }
       </div>
     `,
     styles: `
       .relative { position: relative; }
       .panel { position: absolute; padding: 1rem; }
       .fade-item { display: block; }
     `,
   })
   export class LegacyDemo {
     protected readonly step = signal<'first' | 'second'>('first');
   
     protected toggle() {
       this.step.update((s) => (s === 'first' ? 'second' : 'first'));
     }
   }
   
   @Component({
     selector: 'app-root',
     imports: [NativeDemo, LegacyDemo],
     template: `
       <div class="side-by-side">
         <app-native-demo />
         <app-legacy-demo />
       </div>
     `,
     styles: `
       .side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1rem; }
     `,
   })
   export class App {}

   👍React with 👍1Reacted by Tomas Rimkus
8. JeanMeche

   added

   needs: clarificationThis issue needs additional clarification from the reporter before the team can investigate.This issue needs additional clarification from the reporter before the team can investigate.

   on Oct 29, 2026