Configuration animation

An object defining the animation options of the widget.

Type: Object
Default Value: { show: { type: 'fade', duration: 400, from: 0, to: 1 }, hide: { type: 'fade', duration: 400, to: 0 } }
Default for android below version 4: { show: { type: 'fade', duration: 400 }, hide: { type: 'fade', duration: 400, to: { opacity: 0 }, from: { opacity: 1 } } }
Default for android: {show: {type: 'slide', duration: 200, from: { top: $(window).height() }}, hide: { type: 'slide', duration: 200, to: { top: $(window).height() }}}

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height:100%;">
    <div dx-button="{
        text: 'Show toast',
        onClick: showToast
    }"></div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">Animation type</div>
            <div class="dx-field-value" dx-select-box="{ 
                items: animationTypes,
                onValueChanged: typeChanged,
                value: 'fade'
            }"></div>
        </div>
    </div>
    <div dx-toast="{
        message: 'Toast message',
        bindingOptions: {
            visible: 'toastVisible',
            animation: {
                deep: false,
                dataPath: 'animationConfig'
            }
        }
    }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.animationTypes = [
        "fade",
        "pop",
        "slide"
    ];
    $scope.toastVisible = false;
    $scope.animationConfig = {};
    $scope.typeChanged = function (e) {
        switch (e.value) {
            case "slide":
                $scope.animationConfig = {
                    show: { type: "slide", from: { opacity: 1, top: $(window).height() }, to: { top: $(window).height() - 100 } },
                    hide: { type: "slide", from: { top: $(window).height() - 100 }, to: { top: $(window).height() } }
                };
                break;
            case "pop":
                $scope.animationConfig = {
                    show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
                    hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
                };
                break;
            case "fade":
                $scope.animationConfig = {
                    show: { type: "fade", from: 0, to: 1 },
                    hide: { type: "fade", from: 1, to: 0 }
                };
                break;
            default:
                $scope.animationConfig = {};
        }
    };
    $scope.showToast = function () {
        $scope.toastVisible = true;
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});

body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div data-bind="dxButton: {
    text: 'Show toast',
    onClick: showToast
}"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div style="width: 60%" class="dx-field-label">Animation type</div>
        <div style="width: 40%" class="dx-field-value" data-bind="dxSelectBox: {
            items: animationTypes,
            value: 'fade',
            onValueChanged: typeChanged
        }"></div>
    </div>
</div>
<div data-bind="dxToast: { 
    message: 'Toast message', 
    animation: animationConfig,
    visible: toastVisible
}"></div>
var myViewModel = {
    animationTypes: [
        "fade",
        "pop",
        "slide"
    ],
    toastVisible: ko.observable(false),
    animationConfig: ko.observable({}),
    typeChanged: function (e) {
        switch (e.value) {
            case "slide":
                this.animationConfig({
                    show: { type: "slide", from: { opacity: 1, top: $(window).height() }, to: { top: $(window).height() - 100 } },
                    hide: { type: "slide", from: { top: $(window).height() - 100 }, to: { top: $(window).height() } }
                });
                break;
            case "pop":
                this.animationConfig({
                    show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
                    hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
                });
                break;
            case "fade":
                this.animationConfig({
                    show: { type: "fade", from: 0, to: 1 },
                    hide: { type: "fade", from: 1, to: 0 }
                });
                break;
            default:
                this.animationConfig({});
        }
    },
    showToast: function () {
        this.toastVisible(true);
    }
}
ko.applyBindings(myViewModel);

body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
<div id="showButton"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Animation type</div>
        <div class="dx-field-value" id="animationSelector"></div>
    </div>
</div>
<div id="myToast"></div>
$("#myToast").dxToast({
    message: 'Toast message',
    animation: {
        show: { type: "fade", from: 0, to: 1 },
        hide: { type: "fade", from: 1, to: 0 }
    }
});
$("#showButton").dxButton({
    text: 'Show toast',
    onClick: function () {
        $("#myToast").dxToast("instance").show();
    }
});
$("#animationSelector").dxSelectBox({
    items: [
        "fade",
        "pop",
        "slide"
    ],
    value: 'fade',
    onValueChanged: function (e) {
        switch (e.value) {
            case "slide":
                $("#myToast").dxToast("instance").option("animation", {
                    show: { type: "slide", from: { opacity: 1, top: $(window).height() }, to: { top: $(window).height() - 100 } },
                    hide: { type: "slide", from: { top: $(window).height() - 100 }, to: { top: $(window).height() } }
                });
                break;
            case "pop":
                $("#myToast").dxToast("instance").option("animation", {
                    show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
                    hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
                });
                break;
            case "fade":
                $("#myToast").dxToast("instance").option("animation", {
                    show: { type: "fade", from: 0, to: 1 },
                    hide: { type: "fade", from: 1, to: 0 }
                });
                break;
            default:
                $("#myToast").dxToast("instance").option("animation", {});
        }
    }
});

body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}

hide

An object that defines the animation options used when the widget is being hidden.

Default Value: { type: 'fade', duration: 400, to: 0 }

show

An object that defines the animation options used when the widget is being shown.

Default Value: { type: 'fade', duration: 400, from: 0, to: 1 }