AngularJS animation not triggering

Question

I'm making a basic AngularJS application. Now I want to do an animation between my views. But it won't work, the animation is not triggering. I followed the tutorial on the AngularJS website. I'm probably missing something, I also have no errors in my console.

router.js

(function (app) {
    app.config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/home', {
            controller: 'homeController',
            templateUrl: 'home.html'
        }).when('/product', {
            controller: 'productController',
            templateUrl: 'products.html'
        }).otherwise({
            redirectTo: '/home'
        });
    });

}(angular.module('myApp', ['ngRoute'])));

homeController.js (productcontroller is basically the same)

(function (app) {

    var homeController = function ($scope) {
        $scope.title = "Test";
    }

    app.controller('homeController', ["$scope", homeController]);

}(angular.module('myApp')));

I registered my module in app.js:

(function () {
    angular.module('myApp', ['ngAnimate']);
}());

In my index.html file I include these resources:

<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="myApp/app.js"></script>
<script src="myApp/router.js"></script>
<script src="myApp/controllers/homeController.js"></script>
<script src="myApp/controllers/productController.js"></script>

I think this setup is ok, everything works except the animation. I'm doing the animation in index.html as follows:

<style type="text/css">
.reveal-animation.ng-enter {
    -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
    animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
@-webkit-keyframes enter_sequence {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes enter_sequence {
    from { opacity:0; }
    to { opacity:1; }
}
</style>

<div ng-view class="reveal-animation"></div>

I can't see what I'm doing wrong to make these animations work.

Version: Angular version: 1.2.5 singularity-expansion

Browser: tested in Chrome, FF and IE

Yes as you can see in app.js: angular.module('myApp', ['ngAnimate']); — Dieterg
– Dieterg, Commented Dec 24, 2013 at 13:02
Ahh, okay. Can't see anything obvious here, could you make a fiddle? — Index
– Index, Commented Dec 24, 2013 at 13:04
HMM, interesting, I can't seem to find anything out of the ordinary either .... — Tsasken
– Tsasken, Commented Dec 24, 2013 at 13:05

Khanh TO · Accepted Answer · 2013-12-24 13:20:21Z

1

Try:

app.js:

(function () {
    angular.module('myApp', ['ngAnimate','ngRoute']);//add all dependencies at once.
}());

route.js:

(function (app) {
    app.config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/home', {
            controller: 'homeController',
            templateUrl: 'home.html'
        }).when('/product', {
            controller: 'productController',
            templateUrl: 'products.html'
        }).otherwise({
            redirectTo: '/home'
        });
    });

}(angular.module('myApp'))); //just retrieve the module.

The reason is angular.module('myApp', ['ngRoute']) in your router.js creates a new module named 'myApp' overwriting the angular.module('myApp', ['ngAnimate']); you create earlier in your app.js.

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

From Documentation

edited Dec 24, 2013 at 13:20

answered Dec 24, 2013 at 13:14

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dieterg Over a year ago

Thank you, I'm getting closer. Now I do get a console error in angular-animate.js: object [object] has no method 'classNameFilter'. Now I have something new to google, thank you for your answer. Will keep you guys up to date when I find the solution!

Dieterg Over a year ago

Problem solved: updated all angular sources to the same version (1.2.6).

Collectives™ on Stack Overflow

AngularJS animation not triggering

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related