`ngAnimate` - 集成问题

我已经使用bower安装了我的angular。这里是我的bower.json`ngAnimate` - 集成问题

{ 
    "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" 
    } 
}

而且我发起这样的app.js的angular-animate：

(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:'/' 
     }); 
    }) 

})();

现在我想淡出我的登录页面，而页面加载。我已经申请一类名.loginAnimate，并保持风格的索引页，因为是这样的：

<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>

但动画是不工作的。并且我没有在ng-view中获得ng-active类名。任何一个请帮我解决这个问题？

来源

2015-06-26 3gwebtrain

我删除了<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>

来源

2015-06-26 10:47:20 3gwebtrain

`ngAnimate` - 集成问题

回答

相关问题