Animation in ASP.NET Core Dialog

30 Aug 20231 minute to read

The Dialog widget can be animated while opening and closing the dialog.

We can specify the effect and the duration for the animation. There are two types of effects (slide and fade). We can configure these settings separately for open and close dialog actions.

CSHTML

@{List<string> icon = new List<string>() { "close", "maximize", "minimize", "collapsible" }; }

<div class="control">
    <ej-dialog id="dialog" title="Dialog" action-buttons="icon">
        <e-animation>
            <e-show duration="500" effect="Slide" />
            <e-hide duration="500" effect="Fade" />
        </e-animation>
        <e-content-template>
            <div>
                <p>This is a Dialog</p>
            </div>
        </e-content-template>
    </ej-dialog>
</div>