Animation in Vue Drop down button component.

14 Dec 20245 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:

<template>
    <div>
        <ejs-dropdownbutton :items='items' :animationSettings="slideDownAnimation">Slide Down</ejs-dropdownbutton>
        <ejs-dropdownbutton :items='items' :animationSettings="fadeInAnimation">Fade In</ejs-dropdownbutton>
        <ejs-dropdownbutton :items='items' :animationSettings="zoomInAnimation">Zoom In</ejs-dropdownbutton>
    </div>
</template>

<script setup>
import { DropDownButtonComponent as EjsDropdownbutton } from "@syncfusion/ej2-vue-splitbuttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
const items = [
    { text: 'Unread' },
    { text: 'Has Attachments' },
    { text: 'Categorized' },
    { separator: true },
    { text: 'Important' },
    { text: 'More Filters' }
];

const slideDownAnimation = {
    effect: 'SlideDown',
    duration: 800,
    easing: 'ease'
};

const fadeInAnimation = {
    effect: 'FadeIn',
    duration: 800,
    easing: 'ease'
};

const zoomInAnimation = {
    effect: 'ZoomIn',
    duration: 800,
    easing: 'ease'
};
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
</style>
<template>
    <div>
        <ejs-dropdownbutton :items='items'
            :animationSettings="{ effect: 'SlideDown', duration: 800, easing: 'ease' }">Slide Down</ejs-dropdownbutton>
        <ejs-dropdownbutton :items='items' :animationSettings="{ effect: 'FadeIn', duration: 800, easing: 'ease' }">Fade
            In</ejs-dropdownbutton>
        <ejs-dropdownbutton :items='items' :animationSettings="{ effect: 'ZoomIn', duration: 800, easing: 'ease' }">Zoom
            In</ejs-dropdownbutton>
    </div>
</template>

<script>
import { DropDownButtonComponent } from "@syncfusion/ej2-vue-splitbuttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
    name: "App",
    components: {
        "ejs-dropdownbutton": DropDownButtonComponent
    },
    data() {
        return {
            items: [
                { text: 'Unread' },
                { text: 'Has Attachments' },
                { text: 'Categorized' },
                { separator: true },
                { text: 'Important' },
                { text: 'More Filters' }
            ]
        };
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
</style>