Animation in ASP.NET MVC Dialog

27 Aug 20262 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 via the AnimationSettings property.

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 user sets 'Fade' effect, then the Dialog will open with 'FadeIn' effect and close with '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;">
    @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
    @Html.EJS().Dialog("dialog").Header("Dialog").AnimationSettings(e=>e.Effect(Syncfusion.EJ2.Popups.DialogEffect.Zoom).Duration(400).Delay(0)).Content("Dialog enabled with Zoom effect").Width("250px").Buttons(btn=> {
    btn.Click("dlgButtonClick").ButtonModel(ViewBag.DialogButtons1).Add();
    btn.Click("dlgButtonClick").ButtonModel(ViewBag.DialogButtons2).Add();
    }).Render()
</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();
    }
}