Blazor WebAssembly App - BlazorTransitionableRoute implementation

JByfordRew · Apr 4, 2022 · 396c18e · 396c18e
1 parent f479d5d
commit 396c18e
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 1 deletion.
diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoWasm/Client/App.razor b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoWasm/Client/App.razor
@@ -1,7 +1,14 @@
 <CascadingAuthenticationState>
     <Router AppAssembly="@typeof(App).Assembly">
         <Found Context="routeData">
-            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+            <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>
             <FocusOnNavigate RouteData="@routeData" Selector="h1" />
         </Found>
         <NotFound>

diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoWasm/Client/Program.cs b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoWasm/Client/Program.cs
@@ -15,4 +15,6 @@
 
 builder.Services.AddApiAuthorization();
 
+builder.Services.AddScoped<BlazorTransitionableRoute.IRouteTransitionInvoker, BlazorTransitionableRoute.DefaultRouteTransitionInvoker>();
+
 await builder.Build().RunAsync();
diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoWasm/Client/Shared/MyViewLayout.razor b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoWasm/Client/Shared/MyViewLayout.razor
@@ -0,0 +1,45 @@
+
+@inherits TransitionableLayoutComponent
+@using BlazorTransitionableRouteDemoWasm.Client.Pages
+
+<div class="transition @transitioningClass @(Transition.IntoView ? "transitioned" : "transitioned_behind")">
+    @Body
+</div>
+
+<style>
+    .transition {
+        position: absolute;
+    }
+    .transitioned {
+        z-index: 1;
+    }
+    .transitioned_behind {
+        z-index: 0;
+    }
+</style>
+
+@code {
+    private string transitioningClass => Transition.FirstRender
+        ? "" : $"animate__{transitioningEffect()} animate__faster animate__animated";
+
+    private string transitioningEffect()
+    {
+        if (customTransitions.TryGetValue((TransitionType.fromType, TransitionType.toType), out var custom))
+        {
+            return Transition.IntoView ? custom.effectIn : custom.effectOut;
+        }
+        else
+        {
+            var effect = Transition.IntoView ? "fadeIn" : "fadeOut";
+            var direction = Transition.Backwards ? "Up" : "Down";
+            return effect + direction;
+        }
+    }
+
+    private Dictionary<(Type from, Type to), (string effectOut, string effectIn)> customTransitions =
+        new Dictionary<(Type from, Type to), (string effectOut, string effectIn)>
+        {
+            { (typeof(FetchData), typeof(WeatherDetail)), ( "fadeOutLeft", "fadeInRight" ) },
+            { (typeof(WeatherDetail), typeof(FetchData)), ( "fadeOutRight", "fadeInLeft" ) }
+        };
+} 
diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoWasm/Client/_Imports.razor b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoWasm/Client/_Imports.razor
@@ -9,3 +9,5 @@
 @using Microsoft.JSInterop
 @using BlazorTransitionableRouteDemoWasm.Client
 @using BlazorTransitionableRouteDemoWasm.Client.Shared
+
+@using BlazorTransitionableRoute
diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoWasm/Client/wwwroot/index.html b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoWasm/Client/wwwroot/index.html
@@ -12,6 +12,7 @@
     <link href="manifest.json" rel="manifest" />
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
     <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
 </head>
 
 <body>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,4 +15,6 @@

		builder.Services.AddApiAuthorization();

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

		await builder.Build().RunAsync();