Fade transition different Push/Pop

[rudacs]

Bug Information

Version Number of Plugin: 2.0.1
Device Tested On: iPhone X
Simulator Tested On: iPhone X
Version of VS: 8.2.3
Version of Xamarin: 12.14.0.114
Versions of other things you are using:

Expected Behavior

Animation between the buttons.
Pop will be the same as Push (between controls).

Actual Behavior

Button does not occur Animation (in case of Fade test).
Pop doesn't have the same fluidity as Push.

Code snippet

using System;
using Plugin.SharedTransitions;
using Xamarin.Forms;

namespace test
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new SharedTransitionNavigationPage(new Page1());
        }
    }

    public class Page1 : ContentPage
    {
        public Page1()
        {
            SharedTransitionNavigationPage.SetBackgroundAnimation(this, BackgroundAnimation.Fade);
            SharedTransitionNavigationPage.SetTransitionDuration(this, 2000);

            Title = "Home";

            var button = new Button()
            {
                Text = "BT",
                FontSize = 20,
                WidthRequest = 40,
                TextColor = Color.White,
                BackgroundColor = Color.Blue,
                VerticalOptions = LayoutOptions.FillAndExpand
            };

            button.Clicked += Button_Clicked;

            var label = new Label()
            {
                Text = "Test Home",
                FontSize = 20,
                TextColor = Color.White,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalTextAlignment = TextAlignment.Center,
                VerticalTextAlignment = TextAlignment.Center
            };

            Transition.SetName(button, "bt");
            Transition.SetName(label, "lb");

            Content = new StackLayout()
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.Start,
                BackgroundColor = Color.Red,
                Orientation = StackOrientation.Horizontal,
                HeightRequest = 40,
                Margin = 40,
                Children =
                {
                    button,
                    label
                }
            };
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            Navigation.PushAsync(new Page2());
        }
    }

    public class Page2 : ContentPage
    {
        public Page2()
        {
            SharedTransitionNavigationPage.SetBackgroundAnimation(this, BackgroundAnimation.Fade);
            SharedTransitionNavigationPage.SetTransitionDuration(this, 2000);

            Title = "Page 2...";

            var button = new Button()
            {
                Text = "BK",
                FontSize = 20,
                WidthRequest = 40,
                TextColor = Color.White,
                BackgroundColor = Color.Blue,
                VerticalOptions = LayoutOptions.FillAndExpand
            };

            button.Clicked += Button_Clicked;

            var label = new Label()
            {
                Text = "Page 2 Test",
                FontSize = 20,
                TextColor = Color.White,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalTextAlignment = TextAlignment.Center,
                VerticalTextAlignment = TextAlignment.Center
            };

            Transition.SetName(button, "bt");
            Transition.SetName(label, "lb");

            Content = new StackLayout()
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.Start,
                BackgroundColor = Color.Red,
                Orientation = StackOrientation.Horizontal,
                HeightRequest = 40,
                Margin = 40,
                Children =
                {
                    button,
                    label
                }
            };
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            Navigation.PopAsync();
        }
    }
}

Screenshots

[GiampaoloGabba]

A shared element transition occour beetween moving the same element between two pages. This is done taking a snapshot of the view in the starting page and translate it to the destination (then the snapshot is removed).

In your case, if you want just a fade animation between two pages, dont tag the elements with the transition.name attached property.
If you tag them, then the snapsot is taken and translated to the new page. To better understand this, try to move and resize the button in the second page, so you can check the transition.

If you change the text of the button, then this is no more a shared element transition, and when the transition end the snapshot will be cleared and the button with the new text will appear, so the visive effect is not the best. Usually shared transitions are used to animate size and position of the same element, without changing it's content.

[GiampaoloGabba]

Btw i will check the pop transition: its too fast and is not respecting the 2000ms.

[rudacs]

The button seems not to be happening to the animation, or it is happening very fast but towards the end of the 2000ms animation.

[GiampaoloGabba]

yep, this happens because the button is marked as a SharedTransition element (with the Transition.Name property).
Shared elements does not respond to the background animation because they are intended to "fly" from one page to another modifying their bounds (size and position), check the example app for more insights, or change the position and size of the button in page two and you will catch immediatly what i mean.

So, if you want a sample fade transition, just dont use the Transition.SetName method and the button will fade like the other views :)

[GiampaoloGabba]

i fixed the pop transition issue, is in master branch now. I need to double check in Android.
Regarding the button in your example, if you remove this line: Transition.SetName(button, "bt"); it will fade as you expect.

But i dont recommend to use this plugin to transition fixed elements :)