Change animation settings in React Menu component

30 Jan 20238 minutes to read

To change the animation of the Menu, animationSettings property is used. The supported effects for Menu are,

Effect Functionality
None Specifies the sub menu transform with no animation effect.
SlideDown Specifies the sub menu transform with slide down effect.
ZoomIn Specifies the sub menu transform with zoom in effect.
FadeIn Specifies the sub menu transform with fade in effect.

The following sample illustrates how to open Menu with FadeIn effect with the duration of 800ms. Also we can set easing for menu items.

import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
    // Menu items definition
    let menuItems = [
        {
            items: [
                { text: 'Open' },
                { text: 'Save' },
                { text: 'Exit' }
            ],
            text: 'File'
        },
        {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ],
            text: 'Edit'
        },
        {
            items: [
                { text: 'Toolbar' },
                { text: 'Sidebar' }
            ],
            text: 'View'
        },
        {
            items: [
                { text: 'Spelling & Grammar' },
                { text: 'Customize' },
                { text: 'Options' }
            ],
            text: 'Tools'
        },
        { text: 'Go' },
        { text: 'Help' }
    ];
    let animationSettings = {
        duration: 800,
        effect: 'FadeIn'
    };
    return (<MenuComponent items={menuItems} animationSettings={animationSettings}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

function App() {
    // Menu items definition
    let menuItems: MenuItemModel[] = [
        {
            items: [
                { text: 'Open' },
                { text: 'Save' },
                { text: 'Exit' }
            ],
            text: 'File'
        },
        {
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ],
             text: 'Edit'
        },
        {
            items: [
                { text: 'Toolbar' },
                { text: 'Sidebar' }
            ],
            text: 'View'
        },
        {
            items: [
                { text: 'Spelling & Grammar' },
                { text: 'Customize' },
                { text: 'Options' }
            ],
            text: 'Tools'
        },
        { text: 'Go' },
        { text: 'Help' }
    ];

    let animationSettings: any = {
        duration: 800,
        effect: 'FadeIn'
    }

    return (
        <MenuComponent items={menuItems} animationSettings={animationSettings}/>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));