ngAnimate不使用ng-show / ng-hide

Question

我正在尝试将ngAnimate用于我的ng-show ng-hide指令。但是，当进入/离开页面时动画未应用于div的方式我没有成功。这是我的代码。 谁能看到我做错了什么？ 我确实在我的模块中注入了ngAnimate依赖项。

HTML

            <ul class="list-inline intro-social-buttons">
                <!--Login Button-->
                <li class="btn btn-default btn-lg" id="login-button" ng-click="loginButton()" >
                    <i class="fa fa-twitter fa-fw"></i> <span class="network-name">Login</span>
                </li>    
            </ul>
                <!--Slide down Login form -->
                <div  class=" col-lg-3 fadein fadeout" id="login" ng-show="loginForm.active"  ng-controller="loginCtrl">
                    <div >
                        <form name="login_form" novalidate ng-submit="login()">
                            <div class="input-group">
                                <input type="email"
                                       name="email"
                                       class="form-control"
                                       placeholder="Email"
                                       ng-model="user.email"
                                       required/>
                                <div class="error fadein"
                                     ng-show="login_form.email.$dirty && login_form.email.$invalid">
                                    <small class="error fadein"
                                           ng-show="login_form.email.$error.required" style="color: black">
                                        Your email is required.
                                    </small>
                                    <small class="error fadein"
                                           ng-show="login_form.email.$error.email" style="color: black">
                                        Please input a valid email.
                                    </small>
                                </div>
                            </div>
                            <div class="input-group">
                                <input type="password"
                                       name="password"
                                       class="form-control"
                                       placeholder="Password"
                                       ng-model="user.password"
                                       ng-minlength="8"
                                       ng-maxlength="20"
                                       required>
                                <div class="error fadein"
                                     ng-show="login_form.password.$dirty && login_form.password.$invalid">
                                    <small class="error fadein"
                                           ng-show="login_form.password.$error.required" style="color: black">
                                        Your password is required.
                                    </small>
                                    <small class="error fadein"
                                           ng-show="login_form.password.$error.minlength" style="color: black">
                                        Must be at least 8 characters
                                    </small>
                                    <small class="error fadein"
                                           ng-show="login_form.password.$error.maxlength" style="color: black">
                                        Maximum 20 characters
                                    </small>

                                </div>
                            </div>
                            <input type="submit" class="btn btn-default" id="login_button" value="Log In">
                        </form>
                    </div>
                </div>

JS

angular.module('theNotesApp')
    .controller('welcomeCtrl', ['$scope', function($scope){

        }

        $scope.loginForm = { active: false};
        $scope.registerForm = { active: false};

        $scope.loginButton = function(){
            $scope.loginForm.active = !$scope.loginForm.active;
            $scope.registerForm = { active: false};

        };
        $scope.registerButton = function(){
            $scope.registerForm.active = !$scope.registerForm.active;
            $scope.loginForm = { active: false};


        };

    }]);

CSS

.fadein,
.fadeout {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}

.fadein.ng-hide-remove,
.fadeout.ng-hide-add.ng-hide-add-active {
    opacity: 0;
    display: block !important;
}

.fadeout.ng-hide-add,
.fadein.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
    display: block !important;
}