ngAnimate移动过渡无效

Question

我正在尝试使用移动过渡显示Angular警报，但我似乎无法达到预期的效果。我在AngularJS文件中声明了ngAnimate依赖项。

这是我的代码：

角：

"use strict";

angular.module('MainApp', ['ui.bootstrap', 'ngAnimate'
    ])

.controller("MainController", function ($scope, $http) {
    //initialize scope variables
    $scope.people = [];
    $scope._name = "Default Name";
    $scope._location = "Default Location";
    $scope.user = {
        name: function (theName) {
            if (angular.isDefined(theName)) {
                $scope._name = theName;
            }
            return $scope._name;
        }
        (),
        location: function (theLocation) {
            if (angular.isDefined(theLocation)) {
                $scope._location = theLocation;
            }
            return $scope._location;
        }
        ()
    };
    $scope.alerts = [];
    $scope.addAlert = function(type, message) {
            $scope.alerts.push({type: type, msg: message});
        };

    $scope.CloseSuccessByTimeout = function(index){
                        $scope.alerts.splice(0); 
    }


    //initialize config for headers
    var config = {
        headers: {
            'Access-Control-Allow-Origin': '*',
            'ZUMO-API-VERSION': '2.0.0'
        },
    };

    //call getNames function
    getNames();

    function getNames() {
        $http.get('/api/users', config)
        .then(function (res) {
            console.log(res);
            $scope.people = res.data;
        });
    }

    // add in resource
    function addName(user) {
        var confirmres = confirm("about to post, Continue?");

        if (confirmres == true) {
            //check if user exists
            $http.get('/api/users/id', {
                params: {
                    name: user.name,
                    location: user.location
                },
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    'ZUMO-API-VERSION': '2.0.0'
                },
                dataType: "json",
                contentType: "application/json; charset=utf-8"
            })
            .then(function (res) {
                $scope.retData = res;
                var obj = $scope.retData;
                if (obj.data.length > 0) //if there is, alert
                {
                    $scope.addAlert('danger', 'User exists in the database!');
                } else //if none, then POST
                {
                    $http.post('/api/users', user, config)
                    .then(function (res) {
                        console.log(res.data);
                        //alert('Added successfully!');
                        $scope.addAlert('success', 'Added successfully!');
                        $scope.getNames();
                    })
                    .catch (function (res) {
                        alert(res);
                    });
                }
            })
            .catch (function (res) {
                alert(res);
            });
        }
    }

    function delName(user) {
        var confirmres = confirm("You are about to delete this record. Action cannot be undone. Continue?");
        var retrievedId = "";

        if (confirmres == true) {
            //get the ID via web service
            $http.get('/api/users/id', {
                params: {
                    name: user.name,
                    location: user.location
                },
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    'ZUMO-API-VERSION': '2.0.0'
                },
                dataType: "json",
                contentType: "application/json; charset=utf-8"
            })
            .then(function (res) {
                $scope.retData = res;
                var obj = $scope.retData;
                if (obj.data.length == 0) {
                    $scope.addAlert('danger', 'No data found!');
                } else {
                    angular.forEach(obj.data, function (item) {
                        //perform delete after getting the ID and append it to url
                        $http.delete ('/api/users/' + item._id, config)
                        .then(function (res) {
                            $scope.addAlert('success','item with item ID: ' + item._id + ' deleted');
                            $scope.getNames();

                            //alert('item with item ID: ' + item._id + ' deleted');
                        });
                    });
                }
            })
            .catch (function (res) {
                alert(res);
            });
        }
    }

    $scope.addName = addName;
    $scope.getNames = getNames;
    $scope.delName = delName;

})

的style.css

.animate-enter, 
.animate-leave
{ 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 

.animate-enter.animate-enter-active, 
.animate-leave {
    opacity: 1;
    top: 0;
    height: 30px;
}

.animate-leave.animate-leave-active,
.animate-enter {
    opacity: 0;
    top: -50px;
    height: 0px;
}

这是警报的标记代码：

<div class ="alert" uib-alert ng-repeat="alert in alerts" ng-class="{'alert-success': alert.type == 'success', 'alert-danger': alert.type == 'danger'}" dismiss-on-timeout="5000" close="CloseSuccessByTimeout($index)" ng-animate="'animate'"> {{alert.msg}}</div>

这是我的脚本声明：

<head>
<title>MVA Angular Tutorial</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport"           content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="main-app.start.js"></script>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>

我想知道这里有什么问题，因为看起来ng-animate和CSS不起作用。任何建议将不胜感激。