Background
I am seeking to animate a badge within a component. It has two possible states:
- Hidden
- Shown
When the badge transitions from hidden to shown, I want it to fade into the page and when it transitions from shown back to hidden, I want it to fade out. This part works fine - I simply change the state of the opacity value between 0 and 1.
However, when the badge is hidden, it's still there on the DOM and as it's part of a button, it looks odd on mouseover to see all the empty space there that the badge is still taken up. Ideally, I'd like it to disappear from the DOM when it's hidden.
To this end, I utilize ngIf to remove the badge from the DOM when it's in the hidden state. This works fine to remove and show it, but now I've somewhat eliminated the whole point of the smooth transition with the animation, because ngIf just pops it into existence (moving the element sharing the span with the badge to make room for this badge) and then the animation plays. Oddly, when the fade-out animation is supposed to happen, it simply pops out of existence (no fade-out).
Thus, ideally, I'd like to perform the following:
- On fade in, animate the other content in the span to slide to the side, execute the ngIf of my badge so it pops into existence, animate the badge so it fades into the page
- On fade out, animate the badge so it fades out of the page, jump the state of the other content in the page so it retains its current offset while I simultaneously execute the ngIf of the badge (so it stays in place despite the DOM change) then animate the other content to slide back to its new normal position.
Question:
Does the API allow for chaining of the ngIf activity into the animation transitions so I can make it all a smooth transition between fade in and fade out?
My question varies from angular 2 ngIf and CSS transition/animation given that the animation works (at least it's visible on fade-in) even with the use of ngIf, but I'm more looking for a mechanism to include ngIf within the transitions.
Thanks!
