Is it possible to combine radzen components with Blazor.Animate?

Radzen.Blazor Components
1

Hi there, I wonder if it's possible to use the radzen components in combination with Blazor.Animate somehow?

For example:

<RadzenSteps>
    <Steps>
        <RadzenStepsItem Text="Welcome and Explanation">
            <Screen1Welcome />
        </RadzenStepsItem>

        <RadzenStepsItem Text="Export and Import">
            <Animate Animation="Animations.ZoomIn" Duration="TimeSpan.FromSeconds(0.5)">
                <Screen2FileImport />
            </Animate>
            
        </RadzenStepsItem>
  <Steps>

Basically the goal would be to make the steps slide from left to right when going to a new step.

Or if there are any other Animation libraries that would help me achieve the same kinda case, tips would be appreciated!

Thanks, greetings,

Ron

2

Hi @RonSijm,

Honestly we've never tried that. Is it working?

3

Hey,

I asked because initially it was not working, but for no apparent reason Blazor.Animate wasn't working until I did a couple of hard refreshes.

After that I did

 <RadzenSteps Change="@HandleChangeDirection">

With behind code of

 public class SlidingComponent : ComponentBase
 {
     private int currentIndex;

     public IAnimation Direction { get; set; } = Animations.SlideRight;

     public async Task HandleChangeDirection(int arg)
     {
         if (currentIndex > arg)
         {
             Direction = Animations.SlideLeft;
         }
         else
         {
             Direction = Animations.SlideRight;
         }

         currentIndex = arg;
     }
 }

and everything seems to work :slight_smile:

4

Yep, browser cache is awful especially for WebAssembly applications with PWA enabled.