Animation in ASP.NET CORE Dialog

27 Aug 20263 minutes to read

The Dialog can be animated during the open and close actions. Users can also customize the animation’s delay, duration, and effect.

delay The Dialog animation starts after the specified delay.
duration Specifies the animation duration to complete one animation cycle.
effect Specifies the animation effect for the Dialog open and close actions.

List of supported animation effects:
'Fade' | 'FadeZoom' | 'FlipLeftDown' | 'FlipLeftUp' | 'FlipRightDown' | 'FlipRightUp' | 'FlipXDown' | 'FlipXUp' | 'FlipYLeft' | 'FlipYRight' | 'SlideBottom' | 'SlideLeft' | 'SlideRight' | 'SlideTop' | 'Zoom' | 'None'

If the `Fade` effect is set, the Dialog opens with the `FadeIn` effect and closes with the `FadeOut` effect.

In the following example, the Zoom effect is enabled. As a result, the Dialog opens with the ZoomIn effect and closes with the ZoomOut effect.

<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Modal Dialog"></ejs-button>
    <ejs-dialog id='dialog' header='Dialog' content='Dialog enabled with Zoom effect' target='#container' width='250px'>
        <e-dialog-buttons>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
        </e-dialog-buttons>
        <e-dialog-animationsettings effect="Zoom" duration="400" delay="0"></e-dialog-animationsettings>
    </ejs-dialog>
</div>

<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
    }
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>
public class HomeController : Controller
{
    public class ButtonModel
    {
        public string content { get; set; }
        public string cssClass { get; set; }
    }

    public ActionResult Index()
    {
        ViewBag.DialogButtons1 = new ButtonModel() { cssClass = "e-flat", content = "OK" };
        ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel", cssClass = "e-flat" };
        return View();
    }
}