No transition when navigating inside a CircularShell

[Reffyy]

I've just integrated the CircularShell component into my application and it's all great except that when navigating (using Navigation.PushAsync/PopAsync), the typical page transition no longer happens. Issue doesn't occur when using a NavigationPage instead of the CircularShell as the MainPage.

Is there any workaround for this? I've tried a few things, but no result yet.

Thanks in advance!

[Reffyy]

So, this can be worked around by wrapping the contents ShellContent in a NavigationPage. This doesn't seem right, but it at least works for now. The back button obviously doesn't work properly in this scenario, but I'll try to find a workaround for that, too.

E.g

        <Tab>
            <ShellContent Route="home">
                <NavigationPage>
                    <x:Arguments>
                        <local:IntroPage />
                    </x:Arguments>
                </NavigationPage>
            </ShellContent>
        </Tab>
    </FlyoutItem>```

[myroot]

Hi, We not implement Push/Pop animation on Shell to improve launching time performance. We can consider implementing Push/Pop animation on next release

Alternatively You can make animation yourself with Behavior

    <ContentPage.Behaviors>
        <behaviors:PageAnimationBehavior/>
    </ContentPage.Behaviors>

    public class PageAnimationBehavior : Behavior<Page>
    {
        bool _reEnter = false;
        protected override void OnAttachedTo(Page page)
        {
            base.OnAttachedTo(page);
            page.Appearing += OnAppearing;
        }

        protected override void OnDetachingFrom(Page page)
        {
            base.OnDetachingFrom(page);
            page.Appearing -= OnAppearing;
        }

        void OnAppearing(object sender, EventArgs e)
        {
            var page = sender as Page;

            page.Opacity = 0;
            // It is workaround code, When page was popped and pushed, a native evas object handle was deleted and created,
            // and it consume many cpu time, so animation was not smoothly working. so i add a wating time with BeginInvokeOnMainThread
            Device.BeginInvokeOnMainThread(() =>
            {
                if (_reEnter)
                {
                    Device.BeginInvokeOnMainThread(() =>
                    {
                        var ani = new Animation((rate) =>
                        {
                            page.Scale = 2.0 - rate;
                            page.Opacity = rate;
                        });
                        ani.Commit(page, "appearing", length: 100);
                    });
                }
                else
                {
                    _reEnter = true;
                    var ani = new Animation((rate) =>
                    {
                        page.Scale = 0.3 + 0.7 * rate;
                        page.Opacity = rate;
                    });
                    ani.Commit(page, "appearing", length: 100);
                }
            });
        }
    }