Microsoft-ui-xaml: TabView: Tab closing animation not as good as Chromium Edge

[ZhaoMJ]

Describe the bug
The animation when closing a tab is not consistent and looks strange compared to Chromium Edge. Sometimes there will be no animation and sometimes after closing a tab, all tabs disappear and then reappear with very strange animation. (See my gifs below.)

Steps to reproduce the bug

1. Open an app using TabView.
2. Open a few tabs.
3. Close some of them.
4. Observe the animation when closing tabs.

Expected behavior
TabView provides a consistent and smooth animation when closing tabs.

Screenshots
Chromium Edge:

Windows Terminal (also can be reproduced in XAML Controls Gallery):

Version Info
NuGet package version:
Microsoft.UI.Xaml v2.2.190917002?

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (18363) | Yes |
| May 2019 Update (18362) | Yes |
| October 2018 Update (17763) | |
| April 2018 Update (17134) | |
| Fall Creators Update (16299) | |
| Creators Update (15063) | |

| Device form factor | Saw the problem? |
| :-------------------- | :------------------- |
| Desktop | Yes |
| Mobile | |
| Xbox | |
| Surface Hub | |
| IoT | |

Additional context

[shaheedmalik]

Terminal is running on a prototype version of Tab View, not the current WinUI version.

You'd probably be better off posting the terminal feedback at the on the Terminal GitHub.
https://github.com/microsoft/terminal

Chrominum Edge isn't the same TabView as the one running on XAML, if I am correct as it in running Win32
The WinUI team are working on a new TabView
Here's the issue for it: https://github.com/microsoft/microsoft-ui-xaml/issues/1332

I hope all of this helps.

[mdtauk]

The point to take from this issue is that the closing animation for the TabView should either match Edgium's or be smoother/better.

[ZhaoMJ]

@shaheedmalik
Thanks for your info. However, I just checked the source code of Terminal, and I believe they've moved to UI.Xaml.2.2.190917002. Moreover, this seems not a Terminal-only problem for me since I can see the closing animation of TabView in XAML Controls Gallery is not good as well. Here are some examples:
The animation is missing when closing tabs too fast.

If you pay attention to the last tab, it's noticable that the last tab seem to disappear first when closing other tabs. (I now wonder it's because the plus button moves and the tab container shrinks before the tab closing animation is finished.)

I know Chomium Edge doen't use XAML controls. As @mdtauk said, the point is the closing animation should match Chomium Edge's.

[electronic-dk]

IMHO, the WinUI TabView's closing animation is better than Chromium Edge's (as long as it's working consistently). So I'd rather have the Chromium Edge's animations match WinUI TabView's animations (as soon as they're fixed) than the other way around.

[jevansaks]

I think we're using the stock ThemeTransitions here but I agree they don't look great and seem to have many glitches. @chigy is there a motion comp for the tab animations?

[chigy]

@jevansaks , no I don't have it and will see if there is something I can gather.

[chigy]

@jevansaks , couldn't get motion comp but got motion value that is being evaluated (so not the same as Chrome). Is this sufficient input?
Duration: 300ms
Bezier: .3, .2, .2, 1