Configuration animation

An object that defines the animation options of the widget.

Type: Object
Default Value: { show: { type: 'fade', from: 0, to: 1 }, hide: { type: 'fade', to: 0 } }

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController" style="height: 100%;">
    <div dx-button="{ onClick: togglePopover, text: 'Choose color' }"></div>
    <div dx-popover="{
        width: 200,
        height: 'auto',
        target: '.dx-button',
        bindingOptions: {
            visible: 'visible',
            animation: 'animationConfig'
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <div dx-list="{ dataSource: colors, onItemClick: togglePopover }"></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.colors = ["Red", "Green", "Black"];
    $scope.togglePopover = 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;
}
<div data-bind="dxButton: { onClick: togglePopover, text: 'Choose color' }"></div>
<div data-bind="dxPopover: {
    width: 200,
    height: 'auto',
    visible: visible,
    target: '.dx-button',
    animation: animationConfig
}">
    <div data-options="dxTemplate: { name: 'content' }">
        <div data-bind="dxList: { dataSource: colors, onItemClick: togglePopover }"></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),
    colors: ["Red", "Green", "Black"],
    togglePopover: 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;
}
<div id="toggleButton"></div>
<div id="myPopover"></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>
$("#myPopover").dxPopover({
    width: 200,
    height: 'auto',
    target: '#toggleButton',
    contentTemplate: function (contentElement) {
        var list = $("<div>");
        contentElement.append(list);
        list.dxList({
            dataSource: ["Red", "Green", "Black"],
            onItemClick: function () {
                $("#myPopover").dxPopover("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: 'Choose color',
    onClick: function () {
        $("#myPopover").dxPopover("instance").show();
    }
});
$("#animationSelector").dxSelectBox({
    items: ["pop", "fade", "slide"],
    value: "pop",
    onValueChanged: function (e) {
        switch (e.value) {
            case "slide":
                $("#myPopover").dxPopover("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":
                $("#myPopover").dxPopover("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":
                $("#myPopover").dxPopover("instance").option("animation", {
                    show: { type: "fade", from: 0, to: 1 },
                    hide: { type: "fade", from: 1, to: 0 }
                });
                break;
            default:
                $("#myPopover").dxPopover("instance").option("animation", {});
                break;
        }
    }
});
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', to: 0 }

show

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

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