Animation in React Predefined Dialogs component

02 Feb 2023 / 3 minutes to read

The predefined dialogs can be animated during the open and close actions. Also, user can customize animation’s delay, duration and effect of animation by using the animationSettings property.

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

Alert animation

[Class-component]

Source

Preview

App.jsx

App.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    buttonClick() {
        DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining',
            animationSettings: { effect: 'Zoom' }
        });
    }
    render() {
        return (<div className="App" id='dialog-target'>
       <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={this.buttonClick.bind(this)}>Alert</ButtonComponent>
  </div>);
    }
}
export default App;
`[Functional-component]`;
{
     % tab;
    template = "predefined-dialogs/alert-animation", sourceFiles = "app/App.tsx", compileJsx = true % ;
}
function App() {
    function buttonClick() {
        DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining',
            animationSettings: { effect: 'Zoom' }
        });
    }
    return (<div className="App" id='dialog-target'>
        <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
    </div>);
}
export default App;

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
constructor(props: {}) {
        super(props);
        this.state = { };
    }
public buttonClick() {
    DialogUtility.alert({
        title: 'Low Battery',
        width: '250px',
        content: '10% of battery remaining',
        animationSettings: { effect: 'Zoom'}
    });
}
public render() {
  return (
  <div className="App" id='dialog-target'>
       <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={this.buttonClick.bind(this)}>Alert</ButtonComponent>
  </div>);
   }
}
export default App;



`[Functional-component]`

{% tab template="predefined-dialogs/alert-animation", sourceFiles="app/App.tsx", compileJsx=true %}



import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App(){
  function buttonClick() {
    DialogUtility.alert({
    title: 'Low Battery',
    width: '250px',
    content: '10% of battery remaining',
    animationSettings: { effect: 'Zoom'}
  });
  }
  return (
    <div className="App" id='dialog-target'>
        <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
    </div>
  );
}
export default App;

Confirm animation

[Class-component]

Source

Preview

App.jsx

App.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    buttonClick() {
        DialogUtility.confirm({
            title: 'Delete Multiple Items',
            content: 'Are you sure you want to permanently delete these items?',
            width: '300px',
            animationSettings: { effect: 'Zoom' }
        });
    }
    render() {
        return (<div className="App" id='dialog-target'>
       <ButtonComponent id="confirmBtn" cssClass="e-success" onClick={this.buttonClick.bind(this)}>Confirm</ButtonComponent>
  </div>);
    }
}
export default App;

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
constructor(props: {}) {
        super(props);
        this.state = { };
    }
public buttonClick() {
    DialogUtility.confirm({
        title: 'Delete Multiple Items',
        content: 'Are you sure you want to permanently delete these items?',
        width: '300px',
        animationSettings: { effect: 'Zoom'}
    });
}
public render() {
  return (
  <div className="App" id='dialog-target'>
       <ButtonComponent id="confirmBtn" cssClass="e-success" onClick={this.buttonClick.bind(this)}>Confirm</ButtonComponent>
  </div>);
   }
}
export default App;

[Functionla-component]

Source

Preview

App.jsx

App.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    function buttonClick() {
        DialogUtility.confirm({
            title: 'Delete Multiple Items',
            content: 'Are you sure you want to permanently delete these items?',
            width: '300px',
            animationSettings: { effect: 'Zoom' }
        });
    }
    return (<div className="App" id='dialog-target'>
           <ButtonComponent id="confirmBtn" cssClass="e-success" onClick={buttonClick.bind(this)}>Confirm</ButtonComponent>
      </div>);
}
export default App;

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App() {
    function buttonClick() {
        DialogUtility.confirm({
            title: 'Delete Multiple Items',
            content: 'Are you sure you want to permanently delete these items?',
            width: '300px',
            animationSettings: { effect: 'Zoom'}
        });
    }
    return (
      <div className="App" id='dialog-target'>
           <ButtonComponent id="confirmBtn" cssClass="e-success" onClick={buttonClick.bind(this)}>Confirm</ButtonComponent>
      </div>
    );
}
export default App;

Prompt animation

[Class-component]

Source

Preview

App.jsx

App.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    buttonClick() {
        DialogUtility.confirm({
            title: 'Join Chat Group',
            width: '300px',
            content: '<p>Enter your name:</p> <input type="text" name="Required" class="e-input" placeholder="Type here.." />',
            animationSettings: { effect: 'Zoom' }
        });
    }
    render() {
        return (<div className="App" id='dialog-target'>
        <ButtonComponent id="promptBtn" isPrimary onClick={this.buttonClick.bind(this)}>Prompt</ButtonComponent>
  </div>);
    }
}
export default App;

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
constructor(props: {}) {
        super(props);
        this.state = { };
    }
public buttonClick() {
    DialogUtility.confirm({
      title: 'Join Chat Group',
      width: '300px',
      content:
        '<p>Enter your name:</p> <input type="text" name="Required" class="e-input" placeholder="Type here.." />',
      animationSettings: { effect: 'Zoom'}
    });
}
public render() {
  return (
  <div className="App" id='dialog-target'>
        <ButtonComponent id="promptBtn" isPrimary onClick={this.buttonClick.bind(this)}>Prompt</ButtonComponent>
  </div>);
   }
}
export default App;

[Functional-component]

Source

Preview

App.jsx

App.tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    function buttonClick() {
        DialogUtility.confirm({
            title: 'Join Chat Group',
            width: '300px',
            content: '<p>Enter your name:</p> <input type="text" name="Required" class="e-input" placeholder="Type here.." />',
            animationSettings: { effect: 'Zoom' }
        });
    }
    return (<div className="App" id='dialog-target'>
                <ButtonComponent id="promptBtn" isPrimary onClick={buttonClick.bind(this)}>Prompt</ButtonComponent>
        </div>);
}
export default App;

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App() {
    function buttonClick() {
        DialogUtility.confirm({
        title: 'Join Chat Group',
        width: '300px',
        content:
            '<p>Enter your name:</p> <input type="text" name="Required" class="e-input" placeholder="Type here.." />',
        animationSettings: { effect: 'Zoom'}
        });
    }

    return (
        <div className="App" id='dialog-target'>
                <ButtonComponent id="promptBtn" isPrimary onClick={buttonClick.bind(this)}>Prompt</ButtonComponent>
        </div>
    );
}
export default App;

Contents

Alert animation
Confirm animation
Prompt animation

Contents

Alert animation
Confirm animation
Prompt animation