`ngAnimate` - проблема интеграции

Question

`ngAnimate` - проблема интеграции

0

Я установил 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 и сохранил стиль на индексной странице, как .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. кто-нибудь поможет мне решить эту проблему, пожалуйста?

3gwebtrain 26 июнь 2015, в 13:11

Источник

Теги:

jquery

angularjs

ng-animate

1 ответ

Ещё вопросы

3gwebtrain · Answer 1 · 2015-06-26T08-49-00.000Z

Я удалил <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>