Animations

17 Feb 20229 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.

CSHTML

<div id="default" style="padding-bottom:75px;">
    <div class='row'>
        @Html.EJS().Button("show_toast").Content("Show Toast").CssClass("e-btn").Render()
    </div>
    <div class='row'>
        <div class="col-md-6">
            <label> Show Animation </label>
        </div>
        <div class="col-md-6">
            @Html.EJS().DropDownList("showAnimation").Fields(e => e.Text("Value").Value("Id")).Placeholder("Select a animate type").PopupHeight("200px").Index(0).DataSource((IEnumerable<object>)ViewBag.data).Change("valueChange").Render()
        </div>
    </div>
    <div class='row'>
        <div class="col-md-6">
            <label> Hide Animation </label>
        </div>
        <div class="col-md-6">
            @Html.EJS().DropDownList("hideAnimation").Fields(e => e.Text("Value").Value("Id")).Placeholder("Select a animate type").PopupHeight("200px").Index(0).DataSource((IEnumerable<object>)ViewBag.data).Change("valueChange1").Render()
        </div>
    </div>
    @Html.EJS().Toast("element").Title("Matt sent you a friend request").Content("You have a new friend request yet to accept").Position(p => p.X("Right").Y("Bottom")).Render()
</div>
<script type="text/javascript">
    setTimeout(
        () => {
            var toastObj = document.getElementById('element').ej2_instances[0];
            toastObj.target = document.body;
            toastObj.animation.show.effect = "FadeIn";
            toastObj.animation.hide.effect = "FadeOut";
            toastObj.show();
        }, 1000);
    document.getElementById("show_toast").addEventListener('click', function () {
        var toastObj = document.getElementById('element').ej2_instances[0];
        toastObj.show();
    });
    function valueChange(e) {
        var toastObj = document.getElementById('element').ej2_instances[0];
        toastObj.animation.show.effect = e.value;
    }
    function valueChange1(e) {
        var toastObj = document.getElementById('element').ej2_instances[0];
        toastObj.animation.hide.effect = e.value;
    }
</script>
<style>
    #default {
        width: 600px;
        margin: 0 auto;
    }

    .row {
        margin: 15px;
    }
</style>

Controller.cs

public class HomeController : Controller
{

    public ActionResult Index()
    {
        ViewBag.data = new Animation().Animations();
        return View();
    }
    public class Animation
    {
        public string Value { get; set; }
        public string Id { get; set; }
        public List<Animation> Animations()
        {
            List<Animation> animation = new List<Animation>
                {
                    new Animation { Id = "FadeIn", Value = "Fade In" },
                    new Animation { Id = "FadeZoomIn", Value = "Fade Zoom In" },
                    new Animation { Id = "FadeZoomOut", Value = "Fade Zoom Out" },
                    new Animation { Id = "FlipLeftDownIn", Value = "Flip Left Down In" },
                    new Animation { Id = "FlipLeftDownOut", Value = "Flip Left Down Out" },
                    new Animation { Id = "FlipLeftUpIn", Value = "Flip Left Up In" },
                    new Animation { Id = "FlipLeftUpOut", Value = "Flip Left Up Out" },
                    new Animation { Id = "FlipRightDownIn", Value = "Flip Right Down In" },
                    new Animation { Id = "FlipRightUpIn", Value = "Flip Right Up In" },
                    new Animation { Id = "FlipRightUpOut", Value = "Flip Right Up Out" },
                    new Animation { Id = "SlideBottomIn", Value = "Slide Bottom In" },
                    new Animation { Id = "SlideBottomOut", Value = "Slide Bottom Out" },
                    new Animation { Id = "SlideLeftIn", Value = "Slide Left In" },
                    new Animation { Id = "SlideLeftOut", Value = "Slide Left Out" },
                    new Animation { Id = "SlideRightIn", Value = "Slide Right In" },
                    new Animation { Id = "SlideRightOut", Value = "Slide Right Out" },
                    new Animation { Id = "SlideTopIn", Value = "Slide Top In" },
                    new Animation { Id = "SlideTopOut", Value = "Slide Top Out" },
                    new Animation { Id = "ZoomIn", Value = "Zoom In" },
                    new Animation { Id = "ZoomOut", Value = "Zoom Out" }
                };
            return animation;
        }
    }
}