refactor(vertical-navbar): use native CSS animations for si-navbar-ve…

[spliffone]

…rtical-header

Describe in detail what your merge request does and why. Add relevant
screenshots and reference related issues via Closes #XY or Related to #XY.

---

• I confirm that this MR follows the contribution guidelines.

[spike-rabbit]

Did you check whether it might be easier to just use animate.enter / leave instead of always having those elements in the DOM?

[github-actions]

Documentation.
Examples.
Playwright report.

Coverage Reports:

• element-ng
• element-translate-ng

[spliffone]

Did you check whether it might be easier to just use animate.enter / leave instead of always having those elements in the DOM?

@spike-rabbit we use now animate.leave like you proposed

[spike-rabbit]

you can simplify this by adding an enter animation on the host element an then something like this in the style sheets.

:host.component-enter .inline-group {
  // Prevents initial animation on component load
  transition: none;
}

Then we have less custom JS logic. See the navbar group for an example.

[spliffone]

I was trying the same thing but Angular doesn't drop the 'animate.enter' class from the DOM. When I bind it to the host:

host: {
    'animate.enter': 'component-enter',
    ...

I assume it is cause by the existing transition on the host element. I guess Angular internally listen to the animationend and gets somehow confused.

[github-actions]

[dauriamarco]

As already discussed with @spliffone, I’m closing this in favor of #1226, where the full animations refactoring will be handled.