Change animation settings in React Context menu component
30 Jan 20237 minutes to read
To change the animation of the ContextMenu, animationSettings
property is used.
The supported effects for ContextMenu 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 ContextMenu with FadeIn
effect with the duration
of 800ms
.
import { enableRipple } from '@syncfusion/ej2-base';
import { ContextMenuComponent } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
let animation = {
duration: 800,
effect: 'FadeIn'
};
let menuItems = [
{
text: 'Show All Bookmarks'
},
{
items: [
{
items: [
{
text: 'Google'
},
{
text: 'Gmail'
}
],
text: 'Most Visited'
},
{
text: 'Recently Added'
}
],
text: 'Bookmarks Toolbar'
}
];
return (<div className="container">
<div id='target'>Right click / Touch hold to open the ContextMenu</div>
<ContextMenuComponent id='contextmenu' target='#target' items={menuItems} animationSettings={animation}/>
</div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
import { enableRipple } from '@syncfusion/ej2-base';
import { ContextMenuComponent, MenuItemModel } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
function App() {
let animation: any = {
duration: 800,
effect: 'FadeIn'
};
let menuItems: MenuItemModel[] = [
{
text: 'Show All Bookmarks'
},
{
items: [
{
items: [
{
text: 'Google'
},
{
text: 'Gmail'
}
],
text: 'Most Visited'
},
{
text: 'Recently Added'
}
],
text: 'Bookmarks Toolbar'
}];
return (
<div className="container">
<div id='target'>Right click / Touch hold to open the ContextMenu</div>
<ContextMenuComponent id='contextmenu' target='#target'
items={menuItems} animationSettings={animation}/>
</div>
);
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));