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%;
}