Animation in EJ2 JavaScript Dialog

4 Sep 20265 minutes to read

The Dialog can be animated during the open and close actions. The user can also customize the delay (number, default 0), duration (number, default 400), and effect of the animation by using the animationSettings property.

delay The Dialog animation will start after the specified delay (in milliseconds).
duration Specifies the time (in milliseconds) for one animation cycle to complete.
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 the `Fade` effect, the Dialog internally applies `FadeIn` on open and `FadeOut` on close. Likewise, the `Zoom` effect maps to `ZoomIn` on open and `ZoomOut` on close.

In the following sample, the Zoom effect is enabled. So, the Dialog will open with ZoomIn
and close with ZoomOut effects.

ej.base.enableRipple(true);

// Initialize Dialog component
var dialog = new ej.popups.Dialog({
    //Animation options
    animationSettings: {
        effect: 'Zoom',
        duration: 400,
        delay: 0
    },
    // Enables the header
    header: 'Dialog',
    // Dialog content
    content: 'Dialog enabled with Zoom effect',
    // Enables the footer buttons
    buttons: [
        {
            // Click the footer buttons to hide the Dialog
            'click': () => { dialog.hide(); },
            // Accessing button component properties by buttonModel property
            buttonModel: {
                content: 'OK',
                isPrimary: true
            }
        },
        {
            'click': () => { dialog.hide(); },
            buttonModel: {
                content: 'Cancel'
            }
        }
    ],
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    // Dialog width
    width: '250px'
});
// Render initialized Dialog
dialog.appendTo('#dialog');

// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = function() {
    // Call the show method to open the Dialog
    dialog.show();
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;">Open Dialog</button>
        <div id="dialog"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>