Change animation settings in Angular Context menu component

4 Sep 20255 minutes to read

The ContextMenu component provides customizable animation effects through the animationSettings property. This allows you to control how the context menu appears and disappears, enhancing the user experience with smooth visual transitions.

The supported animation effects for ContextMenu are:

Effect Functionality
None Displays the context menu instantly without any animation effect.
SlideDown Animates the context menu with a sliding motion from top to bottom.
ZoomIn Scales the context menu from small to full size with a zoom effect.
FadeIn Gradually increases the opacity of the context menu from transparent to visible.

The animationSettings property accepts an object with three configurable options: effect (animation type), duration (animation time in milliseconds), and easing (transition timing function). The default settings use SlideDown effect with 400ms duration and ease timing.

The following sample demonstrates how to configure ContextMenu with FadeIn effect and a custom duration of 800ms.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ContextMenuModule } from '@syncfusion/ej2-angular-navigations'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';
import { MenuItemModel } from '@syncfusion/ej2-navigations';

@Component({
imports: [
        
        ContextMenuModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
            <!--target element-->
            <div id="target">Right click / Touch hold to open the ContextMenu</div>
            <!-- To Render ContextMenu. -->
            <ejs-contextmenu id='contextmenu' #contextmenu target='#target' [items]='menuItems' [animationSettings]='animation'></ejs-contextmenu>
            </div>`
})

export class AppComponent {
    public animation = {
        effect: 'FadeIn',
        duration: 800
    };
    public menuItems: MenuItemModel[] = [
        {
            text: 'Show All Bookmarks'
        },
        {
            text: 'Bookmarks Toolbar',
            items: [
                {
                    text: 'Most Visited',
                    items:[
                        {
                            text: 'Gmail'
                        },
                        {
                            text: 'Google'
                        }
                    ]
                },
                {
                    text: 'Recently Added'
                }
            ]
        }];

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));