Animejs with angular directive ngIf

Question

I am starting to use animejs and I would like to include an animation in my Angular application.

While trying so, I have found out that the animation does not work when the div where the animation is placed depends on the directive ngIf . The image correctly loads when the condition in ngIf is true but it is not animated. Removing the directive solves the problem but I want to show it conditionally.

JS:

var value = 2;

anime({
  targets: '#rod',
  translateX: 70,
  easing: 'linear',
  loop: true
});

CSS:

#rod{
  width: 100px;
  height: 100px;
  background-color: red;
}

HTML working fine:

<div id="rod">
</div>

HTML not animating:

<div id="rod" *ngIf="value > 0">
</div>

HTML not working either:

<div *ngIf="value > 0">
    <div id="rod">
    </div>
</div>

Is there anything I should be doing to make the animation work with the Angular directive? I am using Angular 8.2.14.

Answer 1

Using *ngIf HTML is not render so the animation is not working with that. Can you please try using [hidden] attribute?

Hope this helps!

Thank you.