Question

我不习惯在这个社区提问（因为我通常会在同一个论坛中找到99.9％的答案）但我坚持这个问题，因为我对angularJS比较新，甚至更多新手使用cordova，我相信我的问题的原因是两者的结合，而我还没有找到解决这个问题的方法。

对于初学者，我正在使用Angularjs-Cordova Generator来引导我的应用程序。

它工作得非常好，但我在实现动画方面遇到了问题。我已经阅读了很多关于此问题的问题，对大多数人来说，解决方案对我来说都没有用。

这是我到目前为止所读到的内容：

主题：AngularJS 1.2 Animate not working

主题：AngularJS Animate Ng-view Transitions

AngularJS ngAnimate Documentation

这是我实际代码的一部分，我认为主要的问题是这个路由器在这个生成器中的处理方式不同，通常会在angularjs中处理。

routes.js

angular
.module('core')
.config(['$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/');

        /**
         * @ngdoc event
         * @name core.config.route
         * @eventOf core.config
         * @description
         *
         * Define routes and the associated paths
         *
         * - When the path is `'/'`, route to home
         * */
        $stateProvider
            .state('login', {
                url: '/',
                templateUrl: 'modules/core/views/login.html',
                controller: 'LoginController'
            })

            .state('eventos',{
                url: '/eventos',
                templateUrl: 'modules/core/views/eventos.html',
                controller: 'EventosController'
            });

以下是部分的ng-view示例： eventos.html

<div ng-view class="toggle" ng-controller="EventosController">
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="container">
                <div class="clearfix"></div>
            </div>
            <a ng-click="back()"><h4 class="pull-left" style="text-align:center"><div class="glyphicon glyphicon-chevron-left"></div>Eventos</h4></a>
        <button class="btn btn-primary pull-right" ng-click="crearEvento()"><div class="glyphicon glyphicon-plus"></div></button>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">
        <input type="search" class="form-control app-search" placeholder="Filtrar.." />
        <br/>
        <div class="list-group">
          <a ng-repeat="item in scrollItems" ng-click="select(item.id)" href="#" class="list-group-item" style="border-radius:0px;">
            {{ item }} <i class="fa fa-chevron-right pull-right"></i>
          </a>
        </div>

    </div>
</div>

这是我添加到demo.css的css

.toggle {
-webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
-webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* easeOutQuad */
}

.toggle.ng-enter {
opacity: 0;
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
}

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

.toggle.ng-leave {
opacity: 1;
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
}

.toggle.ng-leave-active {
opacity: 0;
}

.toggle.ng-hide-add {
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
opacity: 1;
}

.toggle.ng-hide-add.ng-hide-add-active {
opacity: 0;
}

 .toggle.ng-hide-remove {
transition-duration: 250ms;
-webkit-transition-duration: 250ms;
display: block !important;
opacity: 0;
}

.toggle.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}

所以基本上，正如我在示例中看到的那样，这应该与动画一起运行;但它没有做到。

它实际上是导致此问题的路由吗？或者我做错了什么？

提前多多感谢！

Answer 1

你的ngAnimate包含在哪里？

来自您关联的文档：

除非您包含ngAnimate模块，否则无法使用动画作为您应用程序中的依赖项。

所以......试试

angular
.module('core', ['ngAnimate'])
.config(['$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

使用AngularJS和Cordova时，ngAnimate无效

1 个答案: