Animation in React Drop down button component

13 Dec 20245 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:

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {

    let items = [
        { text: 'Unread' },
        { text: 'Has Attachments' },
        { text: 'Categorized' },
        { separator: true },
        { text: 'Important' },
        { text: 'More Filters' }
    ];

    return (
        <div>
            <DropDownButtonComponent
                items={items}
                animationSettings=
            >
                Slide Down
            </DropDownButtonComponent>
            <DropDownButtonComponent
                items={items}
                animationSettings=
            >
                Fade In
            </DropDownButtonComponent>
            <DropDownButtonComponent
                items={items}
                animationSettings=
            >
                Zoom In
            </DropDownButtonComponent>
        </div>
    );
}

export default App;

ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {

  let items: ItemModel[] = [
    { text: 'Unread' },
    { text: 'Has Attachments' },
    { text: 'Categorized' },
    { separator: true },
    { text: 'Important' },
    { text: 'More Filters' }
  ];

  return (
    <div>
      <DropDownButtonComponent
        items={items}
        animationSettings=
      >
        Slide Down
      </DropDownButtonComponent>
      <DropDownButtonComponent
        items={items}
        animationSettings=
      >
        Fade In
      </DropDownButtonComponent>
      <DropDownButtonComponent
        items={items}
        animationSettings=
      >
        Zoom In
      </DropDownButtonComponent>
    </div>
  );
}

export default App;

ReactDom.render(<App />, document.getElementById('button'));