BlazorAnimation
BlazorAnimation copied to clipboard
[Suggestion] Implementation of enter/exit animations
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;
}
}