Having trouble getting help?
Contact Support
Contact Support
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));