Set animation class in blazor doesnt work.
Animations don't work if I set them as variables, see example. If I set them with JavaScript Interop, they work. Can someone explain why this happens?
private async Task SetTransitionStateAsync(TransitionState state, int animationDelay)
{
string translationPrefix = $"transition-opacity ease-linear duration-{animationDelay}";
CurrentState = state;
switch (CurrentState)
{
case TransitionState.Hidden:
TransitionClass = string.Empty;
IsVisible = false;
break;
case TransitionState.Open:
TransitionClass = string.Empty;
break;
case TransitionState.EnteringStart:
TransitionClass = $"{translationPrefix} -translate-x-full";
IsVisible = true;
break;
case TransitionState.EnteringEnd:
TransitionClass = $"{translationPrefix} translate-x-0";
break;
case TransitionState.LeavingStart:
TransitionClass = $"{translationPrefix} translate-x-0";
break;
case TransitionState.LeavingEnd:
TransitionClass = $"{translationPrefix} -translate-x-full";
break;
}
await InvokeAsync(StateHasChanged);
}
private async Task SetTransitionStateAsync(TransitionState state, int animationDelay)
{
string translationPrefix = $"transition-opacity ease-linear duration-{animationDelay}";
CurrentState = state;
switch (CurrentState)
{
case TransitionState.Hidden:
TransitionClass = string.Empty;
IsVisible = false;
break;
case TransitionState.Open:
TransitionClass = string.Empty;
break;
case TransitionState.EnteringStart:
TransitionClass = $"{translationPrefix} -translate-x-full";
IsVisible = true;
break;
case TransitionState.EnteringEnd:
TransitionClass = $"{translationPrefix} translate-x-0";
break;
case TransitionState.LeavingStart:
TransitionClass = $"{translationPrefix} translate-x-0";
break;
case TransitionState.LeavingEnd:
TransitionClass = $"{translationPrefix} -translate-x-full";
break;
}
await InvokeAsync(StateHasChanged);
}
0 Replies