`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.