1

I'm not used to ask questions in this community (since I usually find 99.9% of the answers in this same forum) but I'm stuck with this issue, and since I'm relatively new to angularJS, and even more novice using cordova, I believe the cause of my problem is the combination of both, and I haven't been able to find a solution for this problem.

For starters, I'm using Angularjs-Cordova Generator to bootstrap my application.

It worked really nice, but I'm having a problem implementing the animations. I've read many questions about this, and the solution for most people, just didn't work for me.

Here's what i've read so far:

Thread: AngularJS 1.2 Animate not working

Thread: AngularJS Animate Ng-view Transitions

AngularJS ngAnimate Documentation

Here's a piece of my actual code, and I believe the main problem is that the routes, are handled different in this generator that they normally would be handled in 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'
            });

Here's an ng-view example of a partial: 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>

And Here's the css I added to demo.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;
}

So basically, as I've seen in the examples, this should be up and running with the animations; but it's not doing them.

Is it actually the routing what is causing this issue? or what am I doing wrong?

Thanks a lot in advance!

Community
  • 1
  • 1
Ozkar619
  • 11
  • 3

1 Answers1

0

where is your include for ngAnimate?

from the docs you linked:

Animations are not available unless you include the ngAnimate module as a dependency within your application.

so... try

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