`animate.enter` và `animate.leave` khác legacy Angular animations thế nào?

animate.enter và animate.leave là API animation mới được compiler hỗ trợ trực tiếp, dùng CSS class hoặc callback khi element vào/rời DOM. Docs Angular hiện tại khuyến nghị native CSS với hai API này cho code mới; nhiều API trong @angular/animations legacy đã bị deprecate.

Ví dụ:

@if (open()) {
  <section animate.enter="fade-in" animate.leave="fade-out">Panel</section>
}

Điểm cần nhớ: nếu dùng callback cho animate.leave, phải gọi animationComplete() để Angular remove element đúng lúc.

animate.enter and animate.leave are newer animation APIs directly supported by the compiler, using CSS classes or callbacks when an element enters/leaves the DOM. Current Angular docs recommend native CSS with these APIs for new code; many legacy @angular/animations APIs are deprecated.

Example:

@if (open()) {
  <section animate.enter="fade-in" animate.leave="fade-out">Panel</section>
}

Key point: if you use a callback for animate.leave, call animationComplete() so Angular removes the element at the right time.