Skip to content

[Suggestion] Implementation of enter/exit animations #12

@russkyc

Description

@russkyc

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;
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions