Configuration animation

An object defining the animation options of the widget.

Type: Object
Default Value: { show: { type: 'pop', duration: 300, from: { scale: 0.55 } }, hide: { type: 'pop', duration: 300, to: { opacity: 0, scale: 0.55 }, from: { opacity: 1, scale: 1 } } }
Default for android below version 4: { show: { type: 'fade', duration: 400 }, hide: { type: 'fade', duration: 400, to: { opacity: 0 }, from: { opacity: 1 } } }
Default for iOS: { show: { type: 'slide', duration: 400, from: { position: { my: 'top', at: 'bottom', of: window } }, to: { position: { my: 'center', at: 'center', of: window } } }, hide: { type: 'slide', duration: 400, from: { position: { my: 'center', at: 'center', of: window } }, to: { position: { my: 'top', at: 'bottom', of: window } } } }

NOTE: To specify in which position the widget will be shown and from which it will be hidden, use the position option.

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ onClick: togglePopup, text: 'Show popup' }"></div>
    <div dx-popup="{
        height: 200,
        title: 'My Popup',
        bindingOptions: {
            visible: 'visible',
            animation: { deep: false, dataPath: 'animationConfig' }
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <p>The popup text.</p>
            <div dx-button="{ text: 'Hide popup', onClick: togglePopup }"></div>
        </div>
    </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,
                value: 'pop',
                onValueChanged: adjustAnimation
            }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.visible = false;
    $scope.togglePopup = function () {
        $scope.visible = !$scope.visible;
    };
    $scope.animationTypes = ["pop", "fade", "slide"];
    $scope.animationConfig = {
        show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
        hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
    };
    $scope.adjustAnimation = function (e) {
        switch (e.value) {
            case "slide":
                $scope.animationConfig = {
                    show: { type: "slide", from: { opacity: 1, top: -200 }, to: { top: 0 } },
                    hide: { type: "slide", from: { top: 0 }, to: { top: -200 } }
                };
                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:
                animationConfig = {};
                break;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
.dx-popup-title{
    border-bottom: solid 2px red;
    padding-bottom: 10px;
}
<div data-bind="dxButton: { onClick: togglePopup, text: 'Show popup' }"></div>
<div data-bind="dxPopup: {
    height: 200,
    title: 'My Popup',
    visible: visible,
    animation: animationConfig
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <p>The popup text.</p>
        <div data-bind="dxButton: { text: 'Hide popup', onClick: togglePopup }"></div>
    </div>
</div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Animation type</div>
        <div class="dx-field-value" data-bind="dxSelectBox: {
            items: animationTypes,
            value: 'pop',
            onValueChanged: adjustAnimation
        }"></div>
    </div>
</div>
var myViewModel = {
    visible: ko.observable(false),
    togglePopup: function () {
        this.visible(!this.visible());
    },
    animationTypes: ["pop", "fade", "slide"],
    animationConfig: ko.observable({
        show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
        hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
    }),
    adjustAnimation: function (e) {
        switch (e.value) {
            case "slide":
                this.animationConfig({
                    show: { type: "slide", from: { opacity: 1, top: -200 }, to: { top: 0 } },
                    hide: { type: "slide", from: { top: 0 }, to: { top: -200 } }
                });
                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:
                animationConfig({});
                break;
        }
    }
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
.dx-popup-title{
    border-bottom: solid 2px red;
    padding-bottom: 10px;
}
<div id="toggleButton"></div>
<div id="myPopup"></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>
$("#myPopup").dxPopup({
    height: 200,
    title: "My Popup",
    contentTemplate: function (contentElement) {
        contentElement.append("<p>The popup text.</p>");
        var closeButton = $("<div>");
        contentElement.append(closeButton);
        closeButton.dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        })
    },
    animation: {
        show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
        hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
    }
});
$("#toggleButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").show();
    }
});
$("#animationSelector").dxSelectBox({
    items: ["pop", "fade", "slide"],
    value: "pop",
    onValueChanged: function (e) {
        switch (e.value) {
            case "slide":
                $("#myPopup").dxPopup("instance").option("animation", {
                    show: { type: "slide", from: { opacity: 1, top: -200 }, to: { top: 0 } },
                    hide: { type: "slide", from: { top: 0 }, to: { top: -200 } }
                });
                break;
            case "pop":
                $("#myPopup").dxPopup("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":
                $("#myPopup").dxPopup("instance").option("animation", {
                    show: { type: "fade", from: 0, to: 1 },
                    hide: { type: "fade", from: 1, to: 0 }
                });
                break;
            default:
                $("#myPopup").dxPopup("instance").option("animation", {});
                break;
        }
    }
});
body{
    text-align: center;
}
.dx-button{
    margin: 10px;
}
.dx-popup-title{
    border-bottom: solid 2px red;
    padding-bottom: 10px;
}

hide

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

Default Value: { type: 'pop', duration: 300, to: { opacity: 0, scale: 0.55 }, from: { opacity: 1, scale: 1 } } }

show

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

Default Value: { type: 'pop', duration: 400, from: { scale: 0.55 } }