FixedTransition.razor

@inherits MudComponentBase
@namespace MudExtensions.Docs.Components

<div class="fixed @(FadeIn ? "animated-background" : "animated-background-reverse") d-flex flex-column align-center justify-center mud-theme-secondary" style="width: 100vw; height: 100vh; z-index: 9999; background: linear-gradient(45deg, #E73C7E, #23A6D5, #E73C7E); background-size: 400%;">
    <MudProgressCircular Style="color: white !important" Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
    <MudText Class="mt-8" Typo="Typo.h4">@Component?.Component?.Name.Replace("`1", null)</MudText>
    <MudText Class="pa-2" Align="Align.Center" Typo="Typo.h6">@Component?.Description</MudText>
</div>

@if (FadeIn)
{
    <MudAnimate Selector=".fade" AnimationType="AnimationType.Fade" Duration="1" Value="10" ValueSecondary="0" />
}
else
{
    <MudAnimate Selector=".fade" AnimationType="AnimationType.Fade" Duration="1" Value="0" ValueSecondary="10" AnimationFillMode="AnimationFillMode.Forwards" />
}

@code{
    [Parameter]
    public MudExtensionComponentInfo? Component { get; set; }

    [Parameter]
    public bool FadeIn { get; set; } = true;
}