Search results

Animations

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.

razor
HomeController.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.DropDowns
@using EJ2MVCSampleBrowser.Models

<div class="control-section">
    <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-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">
                @Html.EJS().DropDownList("showAnimation").Placeholder("Select a animate type").PopupHeight("200px").Index(0).DataSource(
                    (IEnumerable<Pos>)ViewBag.data).Change("valueChange").Fields(new DropDownListFieldSettings { Text = "Value", Value = "Id" }).Render()
            </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">
                @Html.EJS().DropDownList("hideAnimation").Placeholder("Select a animate type").PopupHeight("200px").Index(0).DataSource(
                    (IEnumerable<Pos>)ViewBag.data).Change("valueChange1").Fields(new DropDownListFieldSettings { Text = "Value", Value = "Id" }).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>
    </div>
    <script type="text/javascript">
        setTimeout(
            () => {
                var toastObj = document.getElementById('element').ej2_instances[0];
                toastObj.target = document.body;
                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>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .row {
            margin: 15px;
        }
    </style>
public ActionResult Toast()
{
    ViewBag.data = new Pos().Positions();
    return View();
}
 public class Pos
        {
            public string Value { get; set; }
            public string Id { get; set; }
            public List<Pos> Positions()
            {
                List<Pos> position = new List<Pos>();
                position.Add(new Pos { Id= "FadeIn", Value = "Fade In" });
                position.Add(new Pos { Id= "FadeZoomIn", Value = "Fade Zoom In"});
                position.Add(new Pos { Id= "FadeZoomOut", Value = "Fade Zoom Out" });
                position.Add(new Pos { Id= "FlipLeftDownIn", Value = "Flip Left Down In" });
                position.Add(new Pos { Id= "FlipLeftDownOut", Value = "Flip Left Down Out" });
                position.Add(new Pos { Id= "FlipLeftUpIn", Value = "Flip Left Up In" });
                position.Add(new Pos { Id= "FlipLeftUpOut", Value = "Flip Left Up Out" });
                position.Add(new Pos { Id= "FlipRightDownIn", Value = "Flip Right Down In" });
                position.Add(new Pos { Id = "FlipRightUpIn", Value = "Flip Right Up In" });
                position.Add(new Pos { Id = "FlipRightUpOut", Value = "Flip Right Up Out" });
                position.Add(new Pos { Id = "SlideBottomIn", Value = "Slide Bottom In" });
                position.Add(new Pos { Id = "SlideBottomOut", Value = "Slide Bottom Out" });
                position.Add(new Pos { Id = "SlideLeftIn", Value = "Slide Left In" });
                position.Add(new Pos { Id = "SlideLeftOut", Value = "Slide Left Out" });
                position.Add(new Pos { Id = "SlideRightIn", Value = "Slide Right In" });
                position.Add(new Pos { Id = "SlideRightOut", Value = "Slide Right Out" });
                position.Add(new Pos { Id = "SlideTopIn", Value = "Slide Top In" });
                position.Add(new Pos { Id = "SlideTopOut", Value = "Slide Top Out" });
                position.Add(new Pos { Id = "ZoomIn", Value = "Zoom In" });
                position.Add(new Pos { Id = "ZoomOut", Value = "Zoom Out" });
                return position;
            }
        }