Configuration animation

    An object that defines widget animation options.

    Type: Object
    Default Value: undefined

    Show Example:
    AngularJS
    Knockout
    jQuery
    <div ng-controller="demoController">
        <div class="lookup" dx-lookup="{
            dataSource: lookupDataSource,
            displayExpr: 'name',
            title: 'States',
            bindingOptions: {
                animation: 'animationConfig'
            }
        }"></div>
        <div class="dx-fieldset" style="text-align:left;">
            <div class="dx-field">
                <p><b>Animation type:</b></p>
                <p dx-select-box="{
                    items: ['pop', 'fade', 'slide'],
                    value: 'fade',
                    onValueChanged: adjustAnimation
                }"></p>
            </div>
        </div>
    </div>
    
    var myApp = angular.module('myApp', ['dx']);
    myApp.controller("demoController", function ($scope) {
        $scope.lookupDataSource = new DevExpress.data.DataSource([]);
        $scope.animationConfig = {
            show: { type: "fade", from: 0, to: 1 },
            hide: { type: "fade", from: 1, to: 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;
            }
        };
        $.get("/Content/data/states.txt", function (data) {
            for (var i = 0; i < data.length; i++) {
                $scope.lookupDataSource.store().insert(data[i]);
            }
            $scope.lookupDataSource.load();
        }, "json");
    });
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['myApp']);
    });
    
    .lookup{
        margin: 10px;
    }
    <div class="lookup" data-bind="dxLookup: {
        dataSource: lookupDataSource,
        displayExpr: 'name',
        title: 'States',
        animation: animationConfig
    }"></div>
    <div class="dx-fieldset" style="text-align:left;">
        <div class="dx-field">
            <p><b>Animation type:</b></p>
            <p data-bind="dxSelectBox: {
                items: ['pop', 'fade', 'slide'],
                value: 'fade',
                onValueChanged: adjustAnimation
            }"></p>
        </div>
    </div>
    
    var myViewModel = {
        lookupDataSource: new DevExpress.data.DataSource([]),
        animationConfig: ko.observable({
            show: { type: "fade", from: 0, to: 1 },
            hide: { type: "fade", from: 1, to: 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);
    $.get("/Content/data/states.txt", function (data) {
        for (var i = 0; i < data.length; i++) {
            myViewModel.lookupDataSource.store().insert(data[i]);
        }
        myViewModel.lookupDataSource.load();
    }, "json");
    
    .lookup{
        margin: 10px;
    }
    <div class="lookup" id="myLookup"></div>
    <div class="dx-fieldset" style="text-align:left;">
        <div class="dx-field">
            <p><b>Animation type:</b></p>
            <p id="animationSelector"></p>
        </div>
    </div>
    
    var lookupDataSource = new DevExpress.data.DataSource([]);
    $("#myLookup").dxLookup({
        dataSource: lookupDataSource,
        displayExpr: 'name',
        title: 'States',
        animation: {
            show: { type: "fade", from: 0, to: 1 },
            hide: { type: "fade", from: 1, to: 0 }
        }
    });
    $("#animationSelector").dxSelectBox({
        items: ['pop', 'fade', 'slide'],
        value: 'fade',
        onValueChanged: function (e) {
            switch (e.value) {
                case "slide":
                    $("#myLookup").dxLookup("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":
                    $("#myLookup").dxLookup("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":
                    $("#myLookup").dxLookup("instance").option("animation", {
                        show: { type: "fade", from: 0, to: 1 },
                        hide: { type: "fade", from: 1, to: 0 }
                    });
                    break;
                default:
                    $("#myLookup").dxLookup("instance").option("animation", {});
                    break;
            }
        }
    });
    $.get("/Content/data/states.txt", function (data) {
        for (var i = 0; i < data.length; i++) {
            lookupDataSource.store().insert(data[i]);
        }
        lookupDataSource.load();
    }, "json");
    
    .lookup{
        margin: 10px;
    }

    hide

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

    Default Value: undefined

    show

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

    Default Value: undefined