Allow explicitly specifying backwards flag

First off, this plugin is great!

I’m currently trying to implement a “stack” navigation where page transitions do horizontal slides and it works great. However, I need to make certain page transitions, which are invoked via NavigationManager.NavigateTo to specify that they are backwards. I’ve tried various hacks to try and get around this but no luck. I’ve tried to override the Transition object inside TransitionableLayoutComponent based on a global flag I set before I call NavigateTo but this seems to be changed shortly after.

[Kukks]

I’ve actually found one solution but it requires that I do js interop

await JsRuntime.InvokeVoidAsync("dispatchEventWrapper", "back");
NavigationManager.NavigateTo($"counter/{i}");

[KieranFleckney]

I know this is closed but thought I would provided a solution (If I understood the issue correctly)

First you need to create a attribute

    public class MyAttribute : Attribute
    {
        public string TIn { get; set; }

        public string Tout { get; set; }
    }

Next add this to the page. (Counter page for example)

@page "/counter"
@attribute [MyAttribute(TIn = "FadeIn", Tout = "FadeOut")]

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Then in your MyViewLayout.razor

@inherits TransitionableLayoutComponent
@using BlazorAnimations.Pages;

<div class="transition @transitioningClass">
    @Body
</div>

<style>
    .transition {
        position: absolute;
    }
</style>

@if (!Transition.FirstRender)
{
    <style>
        .transition-in {
            opacity: 0;
        }
    </style>
}

@code {

    private string GetAnimationClass()
    {
        string value = Transition.IntoView ? "fadeInDown" : "fadeOutDown";

        var found = Attribute.IsDefined(Transition.RouteData.PageType, typeof(MyAttribute));

        if (found)
        {
            MyAttribute MyAttribute = (MyAttribute)Attribute.GetCustomAttribute(Transition.RouteData.PageType, typeof(MyAttribute));

            if (Transition.IntoView)
            {
                if (!string.IsNullOrWhiteSpace(MyAttribute.TIn))
                {
                    value = MyAttribute.TIn;
                }
            }
            else
            {
                if (!string.IsNullOrWhiteSpace(MyAttribute.Tout))
                {
                    value = MyAttribute.Tout;
                }
            }
        }

        return value;
    }

    private string transitioningClass => Transition.FirstRender ? "" : Transition.IntoView
    ? $"animate__{GetAnimationClass()} animate__faster animate__animated"
     : $"animate__{GetAnimationClass()} animate__faster animate__animated";

}

This would allow you to specify the in and out animation for each page individually and have default animation for all pages. You could also add logic to do something if it is backwards or what ever you want.

Hope this helps.