From d10a5621f5d4c4523510055093f430279f8c9208 Mon Sep 17 00:00:00 2001 From: JByfordRew Date: Mon, 4 Apr 2022 13:41:20 +0100 Subject: [PATCH] Blazor Server App - BlazorTransitionableRoute implementation --- .../App.razor | 9 +++- .../Pages/_Layout.cshtml | 1 + .../Program.cs | 2 + .../Shared/MyViewLayout.razor | 45 +++++++++++++++++++ .../_Imports.razor | 2 + 5 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Shared/MyViewLayout.razor diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/App.razor b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/App.razor index a9fb8ac..dec47b3 100644 --- a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/App.razor +++ b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/App.razor @@ -1,7 +1,14 @@  - + + + + + + + + diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Pages/_Layout.cshtml b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Pages/_Layout.cshtml index 4314d7d..45a8036 100644 --- a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Pages/_Layout.cshtml +++ b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Pages/_Layout.cshtml @@ -11,6 +11,7 @@ + diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Program.cs b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Program.cs index 33ca0e6..2356985 100644 --- a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Program.cs +++ b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Program.cs @@ -21,6 +21,8 @@ builder.Services.AddScoped>(); builder.Services.AddSingleton(); +builder.Services.AddScoped(); + 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 new file mode 100644 index 0000000..acc9efc --- /dev/null +++ b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/Shared/MyViewLayout.razor @@ -0,0 +1,45 @@ + +@inherits TransitionableLayoutComponent +@using BlazorTransitionableRouteDemoServer.Pages + +
+ @Body +
+ + + +@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" ) } + }; +} \ No newline at end of file diff --git a/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/_Imports.razor b/demo/aspnetcore6.0/v4/BlazorTransitionableRouteDemoServer/_Imports.razor index a0994ff..757c00c 100644 --- 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 \ No newline at end of file