The problem is when you’re using *ngIf to hide the element, it’s no longer rendered in the DOM, so there’s nothing to animate. If using CSS animations, then there’s nothing for CSS to animate anymore as soon as your *ngIf condition turns to false. If using Angular animations and the animation code is inside the component, well, that code is no longer running. When the *ngIf condition comes back to true, the component would restart its lifecycle, restarting the animation from the beginning.
So it seems you would need something outside of the component, so perhaps its parent component, to manage the animations for it. Either that or somehow your component would need an input that could somehow tell it where to start up it’s animation again on ngInit.
Yes, I will try to include animations inside a div of parent HTML instead of container.
That makes sense!
and perhaps I can use display: hide instead of ngIf false for the divs.
Thanks a lot for the info. But I think then parent HTML will get too many contents inside (some thousands lines of animation html contents). I wonder how to deal with this problem… ideally using several components solve this issue.
So if there’s a way to keep these components alive in DOM when they’re ngIf === false, it would be great…
Hello,
maybe I understood it wrong, but as @haydenbraxton said, if ngif is false, then angular will render nothing, nada , niente in the dom, so you can not keep anything alive that is not there.
and it’s open source unlike green sock animation which developers are required to subscribe.
I was looking a way to keep components alive in DOM somehow … maybe by using a different command. I will use ngClass instead perhaps to just set components’ CSS3 display to ‘none’ … and maybe they will stay alive in DOM.
Great info. I will try that as well and see which one works better.
The main HTML page will get thousands lines of html codes if I don’t use components so I thought there could be an option to keep certain elements alive in DOM even when they’re hidden by *ngIf boolean statement but there isn’t any. [hidden] directive may work out.
Or… maybe I can to set component’s CSS3 opacity to 0. Then it will not be visible but it may stay in DOM.
You can try <animatable />, a new Web Component built with StencilJS to use Web Animations API in a declarative way, using just components. There’s a lot of predefined animations, but you can also indicate the keyFrames of your animation => https://github.com/proyecto26/animatable-component
In this way you also can indicate a sequence of animations
