Adding Close Animation to Kendo UI for Angular Menu

Environment

Product

Progress® Kendo UI® for Angular Menu

Description

The Menu component supports opening animations out of the box, but it does not provide a built-in way to animate the closing action. This article demonstrates how to implement custom closing animations for the Kendo UI for Angular Menu component using CSS animations.

This Knowledge Base article also answers the following questions:

• How to add and trigger a custom close animation to the Angular Menu?
• How to prevent the default closing behavior of the Angular Menu?
• How to programmatically close the Angular Menu?
• How to add opening animations to the Angular Menu?

Solution

The following steps demonstrate how to implement custom closing animations for the Kendo UI for Angular Menu component:

1. Create a CSS animation for the closing effect. Modify the animation to fit your requirements.

   css

   @keyframes slideOut {
       from {
           transform: translateX(0);
           opacity: 1;
       }
       to {
           transform: translateX(-30%);
           opacity: 0;
       }
   }
   
   .k-animation-container-closing {
       animation: slideOut 0.25s ease-in-out forwards;
   }

2. Use the close event and call the preventDefault method on the event object. This will enable you to assign a class to the item popup containers, which will handle the closing animation.

   html

   <kendo-menu
     #menu
     [items]="items"
     (close)="close($event, menu)"
   >
   </kendo-menu>

   typescript

   export class AppComponent {
     public items = [{
     text: 'Item2',
     items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }],}];
   
     constructor(private renderer: Renderer2) {}
   
     public close(event: MenuEvent, menu: MenuComponent) {
       event.preventDefault();
       const animationContainers = document.querySelectorAll('.k-animation-container-shown');
   
       if (event.index.includes('_')) {
         animationContainers.forEach((container, index) => {
           if (index !== animationContainers.length - 1) {
             this.renderer.removeClass(container, 'k-animation-container-closing');
           }
         });
   
         const lastContainer = animationContainers[animationContainers.length - 1];
         this.renderer.addClass(lastContainer, 'k-animation-container-closing');
       } else {
         animationContainers.forEach((container) => {
           this.renderer.addClass(container, 'k-animation-container-closing');
         });
       }
     }
   }

3. After the closing animation ends, call the toggle method to close the menu, passing false as the first argument and the index of the menu item that triggered the closing event as the second argument. The index can be accessed from the MenuEvent object.

   typescript

   public close(event: MenuEvent, menu: MenuComponent) {
     // Add at the end of the close method.
     const animationContainers = document.querySelectorAll('.k-animation-container-closing');
     animationContainers.forEach((container) => {
       container.addEventListener('animationend', () => {
         menu.toggle(false, event.index);
       });
     });
   }

4. (Optional) Use the animate property to add default opening animations to the Angular Menu. The property accepts a boolean value or a MenuAnimation object.

   html

   <kendo-menu [animate]="{ duration: 250, type: 'expand' }"> </kendo-menu>

Examples

The following example demonstrates closing animation in a multi-level item Menu.

Change Theme

Theme

Loading ...

The following example demonstrates closing animation in a single-level item Menu.

Change Theme

Theme

Loading ...

See Also

• Kendo UI for Angular Menu Overview
• Menu API Reference