BlazorAnimation icon indicating copy to clipboard operation
BlazorAnimation copied to clipboard

[Suggestion] Implementation of enter/exit animations

Open russkyc opened this issue 1 year ago • 0 comments

I have a list of components that should animate when added/removed and this is how it is currently implemented. Is there a better way tor is there a support for enter and exit animations? Thank you!

@*Enter Animation (Triggered on load)*@
<Animation Effect="@Effect.FadeInUp" Speed="@Speed.Faster">
    @*Exit Animation (Triggered on _isDisposed = true)*@
    <Animation Effect="@Effect.FadeOut" Speed="@Speed.Faster" Enabled="_isDisposed" OnAnimationEnd="OnRemove">
        <MudCard>
            <MudCardContent>
                <MudStack Row="true">
                    <MudText Typo="Typo.body1">@TaskName</MudText>
                    <MudText Typo="Typo.body2">@IsCompleted</MudText>
                    <MudIconButton Icon="@Icons.Material.Filled.Delete" @onclick="Remove" Variant="Variant.Filled" Color="Color.Primary"/>
                </MudStack>
            </MudCardContent>
        </MudCard>
    </Animation>
</Animation>

@code
{
    private bool _isDisposed;
    
    [Parameter] public required string TaskName { get; set; }
    [Parameter] public bool IsCompleted { get; set; }
    [Parameter] public EventCallback OnRemove { get; set; }

    void Remove()
    {
        _isDisposed = true;
    }
}

russkyc avatar Oct 05 '23 03:10 russkyc