Question

I have installed my angular using bower. here is my bower.json

{
  "name": "TCP",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "~2.1.4",
    "angular": "~1.4.1",
    "angular-animate": "~1.4.1"
  },
  "resolutions": {
    "angular": "~1.4.1"
  }
}

And I am initiating the angular-animate in the app.js like this:

(function () {

    "user strict";

    angular.module("tcpApp", ["ngRoute","ngResource", "ngAnimate"])

    .config(function ($routeProvider, $locationProvider) {

        $routeProvider
            .when ("/", {
                templateUrl : "views/login/login.html",
                controller  : "loginController",
                className   : "login"
        });

        $routeProvider
            .when ("/home", {
                templateUrl : "views/home/home.html",
                controller  : "homeController",
                className   : "home"
        });

        $routeProvider
            .otherwise ({
                redirectTo:'/'
        });
    })

})();

Now I want to fade-in my login page while the page loads. I have applied a class name as .loginAnimate and keeping the style in the index page, as like this:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <base href="/">
    <title>TCP App</title>
    <link rel="stylesheet" href="css/lib/fonts.css">
    <link rel="stylesheet" href="css/lib/reset.css">
    <link rel="stylesheet" href="css/tcp.css">
    <link rel="stylesheet" href="css/config.css">
    <link rel="stylesheet" media="screen and (min-width: 768px)"  href="css/mobile768.css">
    <link rel="stylesheet" media="screen and (max-width: 320px)"  href="css/mobile320.css">

    <style>

        .loginAnimate{ transition: all 0.5s ease; }

        .loginAnimate.ng-enter {
            opacity: 0;
        }

        .loginAnimate.ng-enter.ng-enter-active {
            opacity: 1;
        }

    </style>

</head>
<body ng-controller="mainController" ng-class="routeClassName">

    <div class="wrapper">
        <div class="loginAnimate" ng-class="pageClass" ng-view></div>
        <body-footer></body-footer>
    </div>

    <!--Libs -->
    <script src="js/lib/jquery/dist/jquery.min.js"></script>
    <script src="js/lib/angular/angular.min.js"></script>
    <script src="js/lib/angular-resource/angular-resource.min.js"></script>
    <script src="js/lib/angular-route/angular-route.min.js"></script>
    <script src="js/lib/angular-animate/angular-animate.min.js"></script>
    <!--scripts -->
    <script src="app.js"></script>
    <script src="js/script/directives/footer/dirFooter.js"></script>
    <script src="js/script/factory/server.js"></script>
    <script src="js/script/controllers/main/mainController.js"></script>
    <script src="js/script/controllers/login/loginController.js"></script>
    <script src="js/script/directives/header/dirHeader.js"></script>
    <script src="js/script/controllers/home/homeController.js"></script>
    <script src="js/script/directives/home/dirHome.js"></script>
</body>
</html>

But the animation is not working at all. and i am not getting ng-active class name in the ng-view. any one help me to solve this issue please?

Answer 1

我从<body-footer></body-footer>的调整中删除了ng-view并添加到login.html页面。现在这对我有用。

我们不应该在ng-view附近添加任何内容吗？

之前：

<div class="wrapper">
        <div class="loginAnimate" ng-class="pageClass" ng-view></div>
        <body-footer></body-footer> //removed
    </div>

现在我的包装器看起来像这样：

<div class="wrapper">
        <div ng-class="pageClass" ng-view></div>
</div>

`ngAnimate` - integration issue

1 个答案: