Question

You want to animate a list where items fade in and slide up when added, and fade out and slide down when removed. Which animation trigger correctly combines these effects?

Accepted Answer

trigger('listAnim', [
  transition(':enter', [
    style({ opacity: 0, transform: 'translateY(20px)' }),
    animate('400ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
  ]),
  transition(':leave', [
    animate('400ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' }))
  ])
])

Answer

trigger('listAnim', [
  transition(':enter', [
    style({ opacity: 1, transform: 'translateY(0)' }),
    animate('400ms ease-out', style({ opacity: 0, transform: 'translateY(20px)' }))
  ]),
  transition(':leave', [
    animate('400ms ease-in', style({ opacity: 1, transform: 'translateY(0)' }))
  ])
])

Answer

trigger('listAnim', [
  transition(':enter', [
    animate('400ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
  ]),
  transition(':leave', [
    style({ opacity: 0, transform: 'translateY(20px)' }),
    animate('400ms ease-in')
  ])
])

Answer

trigger('listAnim', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('400ms ease-out', style({ transform: 'translateY(0)' }))
  ]),
  transition(':leave', [
    animate('400ms ease-in', style({ opacity: 0 }))
  ])
])

You want to animate a list where items fade in and slide up when added, and fade out and slide down when removed. Which animation trigger correctly combines these effects?

Step 1: Check ':enter' transition for fade in and slide up

Step 2: Check ':leave' transition for fade out and slide down

Step 3: Verify animation timing and easing

Final Answer:

Quick Check:

Want More Practice?