Animation in React Dialog

4 Sep 202612 minutes to read

The React Dialog can be animated during the open and close actions. Animation properties such as delay, duration, and effect can be customized using the animationSettings property.

A single effect value governs both the open and close transitions; you cannot set separate effects for open and close. Each effect maps to an In variant on open and an Out variant on close (for example, Fade → FadeIn on open, FadeOut on close).

Animation properties

Property Default value Description
delay 0 The delay (in milliseconds) before the animation begins.
duration 400 The duration (in milliseconds) of one animation cycle.
effect ‘Fade’ Specifies the animation effect for the React Dialog’s open and close actions.

Supported effects

The following effects are supported by the effect property:

Fade FadeZoom FlipLeftDown FlipLeftUp FlipRightDown FlipRightUp FlipXDown FlipXUp FlipYLeft FlipYRight SlideBottom SlideLeft SlideRight SlideTop Zoom None

Setting effect to ‘None’ disables the animation. For example, if the user sets ‘Fade’ effect, then the React Dialog will open with ‘FadeIn’ effect and close with ‘FadeOut’ effect.

Example

In the following sample, the Zoom effect is enabled. The Dialog will open with ZoomIn and close with ZoomOut effects.

[Class-component]

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    dialogInstance;
    settings = { effect: 'Zoom', duration: 400, delay: 0 };
    buttons = [{
            buttonModel: {
                content: 'OK',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        },
        {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        }];
    handleClick() {
        this.dialogInstance.show();
    }
    render() {
        return (<div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
        <DialogComponent width='250px' animationSettings={this.settings} target='#dialog-target' header='Dialog' showCloseIcon={true} buttons={this.buttons} ref={dialog => this.dialogInstance = dialog}>
        Dialog enabled with Zoom effect</DialogComponent>
    </div>);
    }
}
export default App;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component {
  public dialogInstance: DialogComponent;

  public settings: any = { effect: 'Zoom', duration: 400, delay: 0 };

  public buttons: any = [{
    buttonModel: {
        content: 'OK',
        cssClass: 'e-flat',
        isPrimary: true,
    },
    'click': () => {
        this.dialogInstance.hide();
    }
  },
  {
    buttonModel: {
        content: 'Cancel',
        cssClass: 'e-flat'
    },
    'click': () => {
        this.dialogInstance.hide();
    }
  }];

  public handleClick() {
    this.dialogInstance.show();
  }

  public render() {
   return (
    <div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
        <DialogComponent width='250px' animationSettings={this.settings} target='#dialog-target' header='Dialog' showCloseIcon={true}  buttons={this.buttons} ref={dialog => this.dialogInstance = dialog!}>
        Dialog enabled with Zoom effect</DialogComponent>
    </div>);
  }
}
export default App;

[Functional-component]

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let dialogInstance;
    const settings = { effect: 'Zoom', duration: 400, delay: 0 };
    let buttons = [{
            buttonModel: {
                content: 'OK',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                dialogInstance.hide();
            }
        },
        {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
            },
            'click': () => {
                dialogInstance.hide();
            }
        }];
    function handleClick() {
        dialogInstance.show();
    }
    return (<div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
            <DialogComponent width='250px' animationSettings={settings} target='#dialog-target' header='Dialog' showCloseIcon={true} buttons={buttons} ref={dialog => dialogInstance = dialog}>
            Dialog enabled with Zoom effect</DialogComponent>
        </div>);
}
export default App;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App(){
    let dialogInstance: DialogComponent;
    const settings: any = { effect: 'Zoom', duration: 400, delay: 0 };
    let buttons: any = [{
        buttonModel: {
            content: 'OK',
            cssClass: 'e-flat',
            isPrimary: true,
        },
        'click': () => {
            dialogInstance.hide();
        }
    },
    {
        buttonModel: {
            content: 'Cancel',
            cssClass: 'e-flat'
        },
        'click': () => {
            dialogInstance.hide();
        }
    }];

    function handleClick() {
        dialogInstance.show();
    }

    return (
        <div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
            <DialogComponent width='250px' animationSettings={settings} target='#dialog-target' header='Dialog' showCloseIcon={true}  buttons={buttons} ref={dialog => dialogInstance = dialog!}>
            Dialog enabled with Zoom effect</DialogComponent>
        </div>
    );
}
export default App;

See Also