Animation in Angular Drop down button component

15 Dec 20242 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:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';

import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  imports: [DropDownButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <!-- To render DropDownButton with different animations. -->
      <button ejs-dropdownbutton [items]='items' [animationSettings]='{ effect: "SlideDown", duration: 800, easing: "ease" }' content='Slide Down'></button>
      <button ejs-dropdownbutton [items]='items' [animationSettings]='{ effect: "FadeIn", duration: 800, easing: "ease" }' content='Fade In'></button>
      <button ejs-dropdownbutton [items]='items' [animationSettings]='{ effect: "ZoomIn", duration: 800, easing: "ease" }' content='Zoom In'></button>
    </div>
  `
})
export class AppComponent {
  // Initialize action items.
  public items: ItemModel[] = [
    { text: 'Unread' },
    { text: 'Has Attachments' },
    { text: 'Categorized' },
    { separator: true },
    { text: 'Important' },
    { text: 'More Filters' }
  ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));