Animation in Blazor Components

29 Jul 20221 minute to read

This section provides information about the animation process and how to enable/disable it globally for Syncfusion Blazor Components.

Enable or disable animation globally

You can enable or disable animation for all Syncfusion Blazor Component’s globally by setting GlobalOptions.Animation property while registering the Syncfusion Blazor service, with one of below options,

  • Enable - Enables the animation for all components regardless of individual component’s animation settings.
  • Disable - Disables the animation for all components regardless of individual component’s animation settings.
  • Default - Animation is enabled or disabled based on component’s animation settings.

In the below code example animation is disabled.

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSyncfusionBlazor(options => { options.Animation = GlobalAnimationMode.Disable; });

var app = builder.Build();
....
using Syncfusion.Blazor;

namespace BlazorApplication
{
    public class Startup
    {
        ...
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSyncfusionBlazor(options => { options.Animation = GlobalAnimationMode.Disable; });
        }
        ...
    }
}

GlobalOptions.Animation property controls script level animations only and it is not applicable for direct CSS level animations (Animation defined from CSSs classes/properties).