Angular animation :leave not triggered

[vlio20]

I have a tooltip component with animations in which the :enter animation is working as expected but the :leave animation never triggered.

Here is a link to stackblitz: https://stackblitz.com/edit/building-tooltip-eoby9e?file=src/app/tooltip/tooltip.component.ts

  animations: [
    trigger('tooltip', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate(300, style({ opacity: 1 })),
      ]),
      transition(':leave', [
        animate(300, style({ opacity: 0 })),
      ]),
    ]),
  ],

Angular version: 7.1.4

[dario-piotrowicz]

Hi @vlio20 The issue here is that you have your trigger inside the tooltip component on the div element and not on the tooltip component itself, so when the tooltip component enters it actually works fine because the div with the trigger is entering alongise the component, but when you remove the component you remove it and the div practically doesn't know that it is being removed if you catch what I mean 🙂

The solution here is to apply the trigger to the component itself and not the div inside of it (this can be done with a simple HostBinding) in that case the animation will actually be bound to the component in the way you wanted and all works as it should 🙂

See: https://stackblitz.com/edit/building-tooltip-hf7bp6?file=src%2Fapp%2Ftooltip%2Ftooltip.component.ts

So, yeah I am quite sure this is working as expected 🙂

[dario-piotrowicz]

(PS: :enter and :leave are a bit tricky and not very clearly explained in the docs, I've got an issue open to amend that 🙂 #44253 )

[dario-piotrowicz]

(PS: this issue is practically the same as #29509 I put a similar explanation there if you want to check it out 🙂)

[jessicajaniuk]

Closing since @dario-piotrowicz was able to offer clarity on what's happening here. Feel free to re-open if this is still an issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}