Home

Awesome

BlazorTransitionableRoute

Allows current and previous route to exist enabling page transition animations.

What it does?

Sometimes you need to show transitions between page routes but Blazor, by default, only allows one. This Razor component library provides the ability to remember the last route and allows you to perform transitions out and in, on the old and new route views. You can also use this information to contextually perform different transitions based on the route page types being transitioned.

Demo

Feature Summary

Installation

Latest version in here: NuGet

Install-Package BlazorTransitionableRoute

or

dotnet add package BlazorTransitionableRoute

Usage

Common component steps

Add reference to _Imports.razor file

@using BlazorTransitionableRoute

Add registrations for the dependency injection framework in Program.cs, for example

builder.Services.AddScoped<BlazorTransitionableRoute.IRouteTransitionInvoker, MyRouteTransitionInvoker>();

Or BlazorTransitionableRoute.DefaultRouteTransitionInvoker if you implement transitions via Blazor code and not via jsInterop.

A change to routing approach

You will need to change App.razor to use the newly provided TransitionableRoutePrimary/Secondary components

<details> <summary>Modify the App.razor file</summary>

Modify the App.razor file to take advantage of the transitionable route layouts and view. This means moving the MainLayout to be more explicit in the app router and providing a more container like MyViewLayout as the default layouts. You can see below the simple use of primary and secondary route views. The TransitionableRoutePrimary / Secondary modify the RouteData passed to each inner TransitionableRouteView based on the active state, which is swapped after each navigation to preserve component instances.

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <LayoutView Layout="@typeof(MainLayout)">
            <TransitionableRoutePrimary RouteData="@routeData" ForgetStateOnTransition="true">
                <TransitionableRouteView DefaultLayout="@typeof(MyViewLayout)" />
            </TransitionableRoutePrimary>
            <TransitionableRouteSecondary RouteData="@routeData" ForgetStateOnTransition="true">
                <TransitionableRouteView DefaultLayout="@typeof(MyViewLayout)" />
            </TransitionableRouteSecondary>
        </LayoutView>
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
</details> <details> <summary>Create your own transitiong view</summary>

This example code shows the Blazor coded implementation. For jsInterop see the example usage section below.

@inherits TransitionableLayoutComponent

<div class="@transitioningClass">
    @Body
</div>

@code {
    private string transitioningDirection => Transition.Backwards ? "Up" : "Down";

    private string transitioningClass => Transition.FirstRender ? "" : Transition.IntoView
        ? $"animate__fadeIn{transitioningDirection} animate__faster animate__animated"
         : $"animate__fadeOut{transitioningDirection} animate__faster animate__animated";
}

Transition parameter is provided by the inherited TransitionableLayoutComponent

</details> <details> <summary>Notes on usage</summary> </details>

The API

The library provides a simple set of properties to aid you in adding transitions to your projects.

The TransitionableLayoutComponent, which you may inherit, providing

There is also IRouteTransitionInvoker that you implement when using jsInterop for transitions

Example usage

You can find detailed documentation on example usage here

These demos show examples of the Blazor coded transition option (for the Javascript interop transition option, see the detailed documentation mentioned above).

Version History

Roadmap