perf(tabs): use a transform to resize and move the ink bar

[crisbeto]

Uses a transform, rather than left and width to move/resize the ink bar in order to ensure a smoother transition.

[josephperrott]

Since this is internal, we can just change the signature now. No need to go through the @deprecated path

[crisbeto]

That's fine by me, but I thought the intention with #9972 was to make this logic public.

[josephperrott]

At this point its still internal to the library, though we might make it public later. But since it's still internal at this point, we can just switch it over.

[crisbeto]

Cool, done.

[tinayuangao]

The current tab indicator (colored line under the tab) disappeared in screenshot tests.

[andrewseguin]

When the tabs are first rendered, the ink bar transitions into place. I believe this is a regression

Old behavior: https://stackblitz.com/edit/angular-32czww?file=app/tabs-overview-example.ts

The ink bar is immediately present on first render and only translates when changed.

With this PR, open the demo app and load the tabs page. All the ink bars transition into place on first render.

This is the reason why we are seeing screenshot errors I believe, because the ink bar is 1px wide as if its about to render.

[crisbeto]

@andrewseguin @tinayuangao I've reworked it to prevent it from animating in on the initial load. Marking as merge ready to see if it still breaks anything.

[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.}