BlazorAnimate

Simple library to bring life to your MAUI Blazor project

Getting started

1. Download NuGet package:

Install-Package qWojtpl.BlazorAnimate

2. Go to wwwroot/index.html and add this line to header:

<link rel="stylesheet" href="_content/qWojtpl.BlazorAnimate/css/bundle.css" />

This should be the first stylesheet you are loading in this document!

Bundle contains two files: pages.css and animations.css

animations.css adds all animations

pages.css adds styles for pages

3. Add imports to _Imports.razor

@using BlazorAnimate;
@using static BlazorAnimate.PageLoader.AnimationType;

4. Create main component

• Add empty component to your project (eg. Main.razor)
• Main component should inherit from AppLoader
• This should be defualt page in your application

@page "/"
@inherits PageLoader

5. Prepare first page

• Create new component (eg. Login.razor)
• This page should inherit from AppPage
• You need to add object of page in this component
• In style attribute of this page you have to add reference to PageStyles with index as name of this component

@page "/login"
@inherits AppPage

<div id="your-page-id" class="page" style="@Loader.PageStyles["Login"]">
    
    /* Page html */

</div>

You have to use class page - this is class from pages.css

You have to use style="@Loader.PageStyles["ComponentName"]"~

Don't forget to set background color to your page using id!

6. Add component to Main component

• In your main component (which inherits from PageLoader) add reference to component

<Login AnimationIn="AnimationType.FADE_IN" AutoLoad="true" Loader="this" />

Loader should be always at the end of component reference!

7. Run application and see the results

Inner pages

• In default, BlazorAnimate only lets you create control to one-deep pages (load next <-> unload latest)
• If you want to have page control inside page you can use inner pages

Loader.Load(<PageName>, true);
                        ^^^^
                Marks page as inner page

• For more methods, see Methods section

Methods

Loading next page

<button @onclick="(() => Loader.Load(<PageName>))">Next page!</button>

Unload page

• UnloadLatest doesn't load previous page, only unloads current page!
• Previous page must stay in this same position, so second page should have PreviousAnimationOut as none or first page shouldn't have AnimationOut

<button @onclick="Loader.UnloadLatest">Close me!</button>

Unloading all pages

• Unloads all pages and loads AutoLoad page

<button @onclick="Loader.UnloadAll">Unload all pages!</button>

Load inner page

<button @onclick="(() => Loader.Load(<PageName>, true))">Load page as inner page</button>

Unload latest inner page

• UnloadLatestInner doesn't load previous inner page, only unloads current inner page!
• Previous inner page must stay in this same position, so second page should have PreviousAnimationOut as none or first page shouldn't have AnimationOut

<button @onclick="Loader.UnloadLatestInner">Unload latest inner page</button>

Unload all inner pages

<button @onclick="Loader.ExitInner">Exit all inner pages!</button>

Component and animations

Component attributes

AnimationIn

• Choose enum from AnimationType
• This animation will be fired when component is loading

AnimationOut

• Choose enum from AnimationType
• When this component will be unloaded

PreviousAnimationOut

• If you want previous animation to disappear in different way you can set PreviousAnimationOut

AutoLoad

• True or false, this component will load automatically.
• Only one component should have AutoLoad!

Loader

• Set this in main component as this
• Calling this attribute will register this component

Animation list

- SLIDE_FROM_RIGHT 
- SLIDE_TO_RIGHT 
- SLIDE_FROM_LEFT 
- SLIDE_TO_LEFT 
- SLIDE_FROM_BOTTOM 
- SLIDE_TO_BOTTOM 
- SLIDE_FROM_TOP
- SLIDE_TO_TOP 
- FADE_IN 
- FADE_OUT 

Known performance issues

• When unloading page its display is not changing to none - if you load houndreds of pages, its visibility will never be changed to none, so it will be still rendering in the background