https://github.com/JByfordRew/BlazorTransitionableRoute

Allows current and previous route to exist enabling page transition animations.
https://github.com/JByfordRew/BlazorTransitionableRoute

blazor navigation transition transitions

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/JByfordRew/BlazorTransitionableRoute
• Owner: JByfordRew
• License: mit
• Created: 2020-08-07T14:10:16.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-04-04T18:13:17.000Z (over 2 years ago)
• Last Synced: 2024-08-02T08:10:59.085Z (3 months ago)
• Topics: blazor, navigation, transition, transitions
• Language: C#
• Homepage:
• Size: 6.98 MB
• Stars: 166
• Watchers: 11
• Forks: 17
• Open Issues: 2
• Metadata Files:
  • Readme: README-EXAMPLE.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazor - BlazorTransitionableRoute -   Allows current and previous route to exist enabling transition animations of UI/UX design systems. (Libraries & Extensions / 2D/3D Rendering engines)

README

        
# Demo Documentation

### A change to routing approach

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.

```html

    

        

            

                

            

            

                

            

        

    

    

        

            
Sorry, there's nothing at this address.

        

    


```

### Example usage

You will need to create your own transitiong view, for example (`Transition` parameter is provided by the inherited `TransitionableLayoutComponent`)

```html

@inherits TransitionableLayoutComponent



    @Body



@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";

}

```

(alternatively you can use the default one provided by the component called `TransitionableLayoutComponent` but you will need to handle the `Transition' cascading parameter and probably wrap each page in it's own containing component.  You are free to implement how you like but the cascading parameter is your starting point to prepare for transitioning.)

### Optional example JavaScript Interop usage

You can optionally create an implementation of `IRouteTransitionInvoker` and save it where you like, perhaps in `Shared` folder and make sure it is registered with DI. 

```C#

using BlazorTransitionableRoute;

using Microsoft.JSInterop;

using System.Threading.Tasks;

namespace BlazorTransitionableRouteDemoWasm.Client.Shared

{

    public class RouteTransitionInvoker : IRouteTransitionInvoker

    {

        private readonly IJSRuntime jsRuntime;

        public RouteTransitionInvoker(IJSRuntime jsRuntime)

        {

            this.jsRuntime = jsRuntime;

        }

        public async Task InvokeRouteTransitionAsync(bool backwards)

        {

            await jsRuntime.InvokeVoidAsync("window.yourJsInterop.transitionFunction", backwards);

        }

    }

}

```

For client-side and server-side Blazor - add script section to index.html or _Host.cshtml (head section), for example

```html

... any other supporting animation library scripts you are using, for example using animate.css

```

Add your js interop implementation, for example (this is from the demos using animate.css)

```Javascript

window.yourJsInterop = {

    transitionFunction: function (back) {

        let transitionIn = document.getElementsByClassName('transition-in')[0];

        let transitionOut = document.getElementsByClassName('transition-out')[0];

        let direction = back ? "Up" : "Down";

        if (transitionIn && transitionOut) {

            transitionOut.classList.remove('transition-out');

            transitionOut.classList.add(

                "animate__fadeOut" + direction,

                "animate__faster",

                "animate__animated"

            );

            transitionIn.classList.remove('transition-in');

            transitionIn.classList.add(

                "animate__fadeIn" + direction,

                "animate__faster",

                "animate__animated"

            );

        }

    }

}

```

If you experience timing issues when transition animations are not performing you may need to wrap you inner function code in a zero timeout, for example

```Javascript

window.yourJsInterop = {

    transitionFunction: function (back) {

        setTimout(() => {

           ...

        }, 0);

    }

}

```