Having trouble getting help?
Contact Support
Contact Support
Animation in EJ2 TypeScript Drop down button control
3 Jan 20254 minutes to read
The animationSettings
property is used to customize the animation of the DropDownButton popup. The supported effects for DropDownButton are,
Effect | Functionality |
---|---|
None | Specifies the Dropdown popup transform with no animation effect. |
SlideDown | Specifies the Dropdown popup transform with slide down effect. |
ZoomIn | Specifies the Dropdown popup transform with zoom in effect. |
FadeIn | Specifies the Dropdown popup transform with fade in effect. |
In this sample, three different DropDownButtons are rendered, each showcasing a unique animation effect for the dropdown menu:
import { DropDownButton, ItemModel } from '@syncfusion/ej2-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
//Initialize action items.
let items: ItemModel[] = [
{
text: 'Unread'
},
{
text: 'Has Attachments'
},
{
text: 'Categorized'
},
{
separator: true
},
{
text: 'Important'
},
{
text: 'More Filters'
}
];
// Initialize the DropDownButton component.
let slideDownBtn: DropDownButton = new DropDownButton({
items: items,
animationSettings: { effect: 'SlideDown', duration: 800, easing: 'ease' }
}, '#slideDownButton');
let fadeInBtn: DropDownButton = new DropDownButton({
items: items,
animationSettings: { effect: 'FadeIn', duration: 800, easing: 'ease' }
}, '#fadeInButton');
let zoomInBtn: DropDownButton = new DropDownButton({
items: items,
animationSettings: { effect: 'ZoomIn', duration: 800, easing: 'ease' }
}, '#zoomInButton');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 DropDownButton</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<button id="slideDownButton">Slide Down</button>
<button id="fadeInButton">Fade In</button>
<button id="zoomInButton">Zoom In</button>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}