[Spec] Transitions

# Transitions

Maui already has a complete animations API allowing you to create a live and fluid content on a page. However, what happens when navigating between pages?.

This spec defines a Maui **transitions API**. We have two types of well-differentiated transitions:
- **Traditional transitions**: Traditionally transitions between different pages involved enter and exit transitions that animated entire view hierarchies independent to each other.
- **Shared element transitions**: Many times, there are elements common to both activities and providing the ability to transition these shared elements separately emphasizes continuity between transitions and breaks activity boundaries as the user navigates the app.


# API

## Traditional transitions

For the traditional transitions, we need a new enumeration with the supported transitions:
```csharp
public enum NavigationTransitionType
{
None,
Fade,
Flip,
Scale,
SlideFromLeft,
SlideFromRight,
SlideFromTop,
SlideFromBottom,
Turnstile
}
```

And, include new properties in the **Page** to allow page transitions using NavigationPage and Shell:
- **TransitionType**: The transition effect used.
- **TransitionDuration**: The transition duration in milliseconds.

```csharp
public static readonly BindableProperty TransitionTypeProperty =
BindableProperty.Create(nameof(TransitionType), typeof(NavigationTransitionType), typeof(NavigationPage), PageTransitionType.None,
BindingMode.TwoWay, null);

public NavigationTransitionType TransitionType
{
get { return (NavigationTransitionType)GetValue(TransitionTypeProperty); }
set { SetValue(TransitionTypeProperty, value); }
}

public static readonly BindableProperty TransitionDurationProperty =
BindableProperty.Create(nameof(TransitionDuration), typeof(double), typeof(NavigationPage), 500d,
BindingMode.TwoWay, null);

public double TransitionDuration
{
get { return (double)GetValue(TransitionDurationProperty); }
set { SetValue(TransitionDurationProperty, value); }
}
```

## Shared element transitions

On the other hand, we need a way to allow the shared element transitions. The key is a way to _"link"_ the same item available in two different pages.

We will have the **TransitionTag** attached property to the supported elements inherited from View:

```csharp
public static readonly BindableProperty TransitionTagProperty =
BindableProperty.CreateAttached("TransitionTag", typeof(int), typeof(Transition), 0,
propertyChanged: OnPropertyChanged);
```

The use would be:

```xaml

```

Tag the control to transition in the source page.

```xaml

```

And tag the control to transition in the destination page.

# Scenarios

Let's see some examples.

## XAML Example

A sample using transitions between pages:

```xaml

```

A sample using shared transitions elements:

Page 1:
```xaml

```

Page 2:
```xaml

```

# Notes

- The `TransitionTag` in source and destination page needs to match in order to display the transition.
- You can animate multiple views at once, but every `TransitionTag` in a page needs to be unique.

# Difficulty : Medium