icon

BlazorWasm.PageFx

PRs Welcome License: MIT

Lightweight, plug-and-play page transition animations for Blazor WebAssembly navigation.

View in DocFx

This package provides a simple way to animate route changes without rewriting your routing logic or introducing heavy animation frameworks.

⚠️ Blazor WebAssembly only
This package is designed and tested exclusively for Blazor WASM projects.

Features

  • Smooth page transition animations on navigation
  • Minimal setup (no custom router required)
  • Lightweight (no external dependencies)
  • Works with existing Router
  • CSS-based animations (easy to customise)

Installation

dotnet add package BlazorWasm.PageFx

Setup

Register the service

Modify your Program.cs:

using Racer.BlazorWasm.PageFx.Services;

// --snip--
builder.Services.AddPageFxService();

// Replace:
// await builder.Build().RunAsync();

// With:
var host = builder.Build();

await host.Services
    .GetRequiredService<PageFxService>()
    .InitializeAsync();

await host.RunAsync();

NB: The default selectors where the transition animations will be applied are .page-fx-app and page-fx-content. They have to be referenced in your MainLayout.razor file like so:

<div class="app page-fx-app">  
    <NavBar/>  
    <div class="container page-fx-content">  
        <div class="second-container">  
            @Body  
        </div>  
    </div>  
    <PageFooter/>  
</div>

page-fx-app - Transition animation will be applied to the entire page.
page-fx-content - Transition animation will be applied only to the page content.

Wrap your router(Optional)

Modify your App.razor:

@using Racer.BlazorWasm.PageFx.Components

<PageFxHost>
	<Router AppAssembly="typeof(App).Assembly" />
	@* --snip-- *@
	</Router>
</PageFxHost>

NB: Without this, only the initial page load transition animation will not be applied.

Reference the CSS file

In wwwroot/index.html, inside the <head> section:

<link rel="stylesheet" href="_content/BlazorWasm.PageFx/pageFx.css" />

Customization

1. Extend/Override Transitions

Transition animations are driven by CSS, so you can easily override or extend animations.
Add this to any referenced CSS file in your project:

.page-fx-route-in {  
    transform: initial;  
    opacity: initial;  
}  
  
.page-fx-route-out {  
    transform: scale(0.98);  
    opacity: 0;  
}

Parameters:

  • .page-fx-route-in - in-transition animation on subsequent page navigations
  • .page-fx-route-out - out-transition animation on subsequent page navigations

Other Parameters(extendable):

  • .page-fx-init-in - in-transition animation on initial page loads
  • .page-fx-init-out - out-transition animation on initial page loads

FAQs

Does this work with Blazor Server?

No. This package targets Blazor WebAssembly only.

Does it replace the Router?

No. It wraps the existing Router component.

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

Edit this page