Animation in EJ2 TypeScript Toast control

10 May 202313 minutes to read
The toast control supports custom animations for both shows and hide actions from the provided animation option of the Animation library.
The default animation is given as FadeIn for showing the toast and FadeOut for hiding the toast.
The following sample demonstrates some types of animations that suit toast. You can check all the animation effects here.
index.ts
index.html
import {Toast} from '@syncfusion/ej2-notifications';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { enableRipple, Effect } from '@syncfusion/ej2-base';

enableRipple(true);
let toast: Toast = new Toast({
    title: 'Matt sent you a friend request',
    content: 'You have a new friend request yet to accept',
    position: { X: 'Right', Y: 'Bottom' },
    animation: { show: { effect: "FadeIn" }, hide: { effect: "FadeOut" } },
});
toast.appendTo('#element');
toast.show();

let listObjExpand: DropDownList = new DropDownList({
    index: 0,
    placeholder: 'Select a animate type',
    change: () => { valueChange();  }
});
listObjExpand.appendTo('#showAnimation');

let listObjCollapse: DropDownList = new DropDownList({
    placeholder: 'Select a animate type',
    change: () => { valueChange1();  }
});
listObjCollapse.appendTo('#hideAnimation');

document.getElementById('show_toast').onclick = () => {
    toast.show();
}

function valueChange(): void {
  toast.animation.show.effect = <Effect>(listObjExpand.value);
}

function valueChange1(): void {
  toast.animation.hide.effect = <Effect>(listObjCollapse.value);
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="default" style="padding-bottom:75px; width: 35%;">
            <div class='row'>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <label> Show Animation </label>
                </div>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <select id="showAnimation">
                        <option value="FadeIn">Fade In</option>
                        <option value="FadeZoomIn">Fade Zoom In</option>
                        <option value="FadeZoomOut">Fade Zoom Out</option>
                        <option value="FlipLeftDownIn">Flip Left Down In</option>
                        <option value="FlipLeftDownOut">Flip Left Down Out</option>
                        <option value="FlipLeftUpIn">Flip Left Up In</option>
                        <option value="FlipLeftUpOut">Flip Left Up Out</option>
                        <option value="FlipRightDownIn">Flip Right Down In</option>
                        <option value="FlipRightDownOut">Flip Right Down Out</option>
                        <option value="FlipRightUpIn">Flip Right Up In</option>
                        <option value="FlipRightUpOut">Flip Right Up Out</option>
                        <option value="SlideBottomIn">Slide Bottom In</option>
                        <option value="SlideBottomOut">Slide Bottom Out</option>
                        <option value="SlideLeftIn">Slide Left In</option>
                        <option value="SlideLeftOut">Slide Left Out</option>
                        <option value="SlideRightIn">Slide Right In</option>
                        <option value="SlideRightOut">Slide Right Out</option>
                        <option value="SlideTopIn">Slide Top In</option>
                        <option value="SlideTopOut">Slide Top Out</option>
                        <option value="ZoomIn">Zoom In</option>
                        <option value="ZoomOut">Zoom Out</option>
                    </select>
                </div>
            </div>
            <div class='row'>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <label> Hide Animation </label>
                </div>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <select id="hideAnimation">
                        <option value="FadeIn">Fade In</option>
                        <option value="FadeZoomIn">Fade Zoom In</option>
                        <option value="FadeZoomOut">Fade Zoom Out</option>
                        <option value="FlipLeftDownIn">Flip Left Down In</option>
                        <option value="FlipLeftDownOut">Flip Left Down Out</option>
                        <option value="FlipLeftUpIn">Flip Left Up In</option>
                        <option value="FlipLeftUpOut">Flip Left Up Out</option>
                        <option value="FlipRightDownIn">Flip Right Down In</option>
                        <option value="FlipRightDownOut">Flip Right Down Out</option>
                        <option value="FlipRightUpIn">Flip Right Up In</option>
                        <option value="FlipRightUpOut">Flip Right Up Out</option>
                        <option value="SlideBottomIn">Slide Bottom In</option>
                        <option value="SlideBottomOut">Slide Bottom Out</option>
                        <option value="SlideLeftIn">Slide Left In</option>
                        <option value="SlideLeftOut">Slide Left Out</option>
                        <option value="SlideRightIn">Slide Right In</option>
                        <option value="SlideRightOut">Slide Right Out</option>
                        <option value="SlideTopIn">Slide Top In</option>
                        <option value="SlideTopOut">Slide Top Out</option>
                        <option value="ZoomIn">Zoom In</option>
                        <option value="ZoomOut">Zoom Out</option>
                    </select>
                </div>
            </div>
            <div class='row'> <button class="e-btn" id="show_toast"> Show Toast</button> </div>
        </div>
        <div id='element'></div>
        <br/>
        <br/>
    </div>
</body>

</html>