Animation in EJ2 JavaScript Drop down button control

3 Jan 20255 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:

ej.base.enableRipple(true);

//Initialize action items.
var items = [
    {
        text: 'Unread'
    },
    {
        text: 'Has Attachments'
    },
    {
        text: 'Categorized'
    },
    {
        separator: true
    },
    {
        text: 'Important'
    },
    {
        text: 'More Filters'
    }
];

// initialize DropDownButton component
var slideDownBtn = new ej.splitbuttons.DropDownButton({
    items: items,
    animationSettings: { effect: 'SlideDown', duration: 800, easing: 'ease' }
}, '#slideDownButton');
var fadeInBtn = new ej.splitbuttons.DropDownButton({
    items: items,
    animationSettings: { effect: 'FadeIn', duration: 800, easing: 'ease' }
}, '#fadeInButton');
var zoomInBtn = new ej.splitbuttons.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/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        <button id="slideDownButton">Slide Down</button>
        <button id="fadeInButton">Fade In</button>
        <button id="zoomInButton">Zoom In</button>
    </div>

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

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}