Blazor Server App - BlazorTransitionableRoute implementation

JByfordRew · Apr 4, 2022 · d10a562 · d10a562
1 parent ec36bb8
commit d10a562
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 1 deletion.
diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/App.razor b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/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/BlazorTransitionableRouteDemoServer/Pages/_Layout.cshtml b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Pages/_Layout.cshtml
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="BlazorTransitionableRouteDemoServer.styles.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
 <body>

diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Program.cs b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Program.cs
@@ -21,6 +21,8 @@
 builder.Services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();
 builder.Services.AddSingleton<WeatherForecastService>();
 
+builder.Services.AddScoped<BlazorTransitionableRoute.IRouteTransitionInvoker, BlazorTransitionableRoute.DefaultRouteTransitionInvoker>();
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.

diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Shared/MyViewLayout.razor b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Shared/MyViewLayout.razor
@@ -0,0 +1,45 @@
+
+@inherits TransitionableLayoutComponent
+@using BlazorTransitionableRouteDemoServer.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/BlazorTransitionableRouteDemoServer/_Imports.razor b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/_Imports.razor
@@ -8,3 +8,5 @@
 @using Microsoft.JSInterop
 @using BlazorTransitionableRouteDemoServer
 @using BlazorTransitionableRouteDemoServer.Shared
+
+@using BlazorTransitionableRoute