The Dialog can be animated during the open and close actions. Also, user can
customize animation’s delay,
duration
and effect by using animationSettings property.
| 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.
import { Dialog } from '@syncfusion/ej2-popups';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// Initialize Dialog component
let dialog = new 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',
cssClass: 'e-flat'
}
}
],
// 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 = (): void => {
// 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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<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>
</body>
</html>html,
body,
#container {
height: 100%;
overflow: hidden;
width: 100%;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}