Я установил свой angular
, используя bower
. вот мой 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"
}
}
И я запускаю angular-animate
в app.js вот так:
(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-active
имя класса в ng-view
. кто-нибудь поможет мне решить эту проблему, пожалуйста?