Search results

Animation in ASP.NET Core Dialog control

20 Apr 2021 / 1 minute to read

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

delay The Dialog animation will start with the mentioned delay
duration Specifies the animation duration to complete with one animation cycle
effect Specifies the animation effects of Dialog open and close actions effect.

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 below sample, Zoom effect is enabled. So, The Dialog will open with ZoomIn and close with ZoomOut effects.

tagHelper
controller.cs
Copied to clipboard
<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>
Copied to clipboard
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();
    }
}